保藏本站 保藏本站
真钱棋牌网主页 - 软件测验 - 常用手册 - 站长东西 - 技能社区
主页 > JavaScript > JavaScript技巧 > 正文

主页 - PHP - 数据库 - 操作体系 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS指令 - jQuery - CSS款式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

详解angular2完成ng2-router 路由和嵌套路由

完成ng2-router路由,嵌套路由

首要装备angular2的时分router模块现已下载,只需求引进即可

import {RouterModule, Routes} from "@angular/router";

咱们要创立一个嵌套路由,所以需求创立以下文件

index.html app.module.ts app.component.ts home.component.ts list.component.ts list-one.component.ts list-two.component.ts

完成作用:

路由,单机“主页”加载home.component.ts 单机"列表“加载list.component.ts 列表中包括嵌套路由,tab页 单机"标签一"加载list-one.component.ts 单机"标签二"加载list-one.component.ts

开端装备

index.html界面装备两点

<head>标签中引进 <meta href="/" rel="external nofollow" />

引进路由代码显现标签 引进主组件标签 <my-app></my-app>

就这么简略, index.html界面装备结束

app.module.ts界面装备路由

  import {BrowserModule} from "@angular/platform-browser";
  import {NgModule} from "@angular/core";
  import {RouterModule, Routes} from "@angular/router";

  // 表单 双向数据绑定
  import {FormsModule} from "@angular/forms";
  import {AppComponent} from "./app.component";
  // List中包括两个tab子组件
  import {ListComponent} from "./list.component";
  import {ListOneComponent} from "./list-one.component";
  import {ListTwoComponent} from "./list-two.component";
  import {HomeComponent} from "./home.component";
  // 界说路由, bootstrap默许加载组件便是AppComponent,所以他便是主页导航页,然后增加的路由都在他的模板中。

  // 能够一切代码写在NgModule中, 也能够这样自界说常量,然后运用。

  // 界说常量 嵌套自路由
  const appChildRoutes: Routes = [
   {path: "one", component: ListOneComponent},
   {path: "two", component: ListTwoComponent},
   // 假如地址栏中输入没有界说的路由就跳转到one路由界面
   {
    path: '**', redirectTo: "one"
   }
  ];
  // 界说常量 路由
  const appRoutes:Routes = [
   {path: '', component: HomeComponent},
   {
    path: 'list',
    component: ListComponent,
    children: appChildRoutes
  ];
  // 引证界说的路由
  @NgModule({
   imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes)
   ],
   declarations: [
    AppComponent,
    ListComponent,
    HomeComponent,
    ListOneComponent,
    ListTwoComponent
   ],
   bootstrap: [AppComponent]
  })
  export class AppModule {
  
  }

这样就完成了嵌套路由的装备

显现路由内容

app.component.ts

  import {Component} from "@angular/core";
  @Component({
   selector: "my-app",
   // templateUrl: "../views/one.html"
   template: `
        <div>
        <!--运用了bootstrap款式的导航,routerLinkActive,表明路由激活的时分,谈价active类款式-->
         <ul class="nav navbar-nav">
          <li routerLinkActive="active"><a routerLink="home">主页</a></li>
          <li routerLinkActive="active"><a routerLink="contact">联络咱们</a></li>
          <li routerLinkActive="active"><a routerLink="product">产品</a></li>
         </ul>
         <!--路由内容显现区域-->
         <router-outlet></router-outlet>
        </div>
        `
  })
  export class AppComponent {
  
  }

list.component.ts

  import {Component} from "@angular/core";
  @Component({
    selector: "my-list",
    // templateUrl: "../views/list.html"
    template: `
       <div>
        <!-- 子路由衔接 -->
        <a routerLink="one">one</a>
        <a routerLink="two">two</a>
        <!-- 路由内容显现标签 -->
        <router-outlet></router-outlet>
       </div>
     `
  })
  export class ListComponent {
    name = "list";
  }

list-one.component.ts

  import {Component} from "@angular/core"
  @Component({
    selector: "my-list-one",
    template:`
      {{name}}
    `
  })
  export class ListOneComponent {
    name = "list-one";
    }

list-two.component.ts同理

获取路由参数id (about:id) 增加模块 ActivatedRoute

  import {ActivatedRoute} from "@angular/router";  
  export class AboutList {
    id: Object;
    constructor(public route:ActivatedRoute) {
      this.id = {};
    }
    ngOnInit() {
      this.route.params.subscribe(params => {
        this.id = params // {id: "xxx"}
      });
    }
  }

直接获取id值

  this.route.snapshot.params["id"]
补助: 路由中的界面跳转
  import {Router} from "@angular/router";
  
  constructor(public router: Router) {
  // 相当于window.location.href,界面跳转
    router.navigateByUrl('home');
  }

以上便是本文的全部内容,期望对咱们的学习有所协助,也期望咱们多多支撑真钱棋牌网。

angular仿付出宝暗码框输入作用
项目需求,运用ng写一个暗码框格子付出模块,一开端运用一个input+letter-spacing来切割字符,可是发现距离十分欠好操控,跟着字符的输入文本框字符串

运用vue.js写一个tab选项卡作用
一般咱们写tab选项卡的时分,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素增加active类,可是在vue.js中,咱们能不去操作dom咱们就尽量

vue顶用动态组件完成选项卡切换作用
最近在研讨vue的路上,那么今日也算个学习笔记吧!导航按钮:divclass="tab-title"p@click="a='tab1'"router-linkto='/collectnewcars'新车/router-linkem/em/pp@click="a='tab2'"rout

本周排行

更新排行

强悍的草根IT技能社区,这儿应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 ystekkfj.com. All Rights Rreserved  京ICP备05050695号