大佬教程收集整理的这篇文章主要介绍了angular2 ng2-router 路由，嵌套路由详解，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
实现ng2-router路由，嵌套路由@H_874_3@
首先配置angular2的时候router模块已经下载，只需要引入即可@H_874_3@
import {RouterModule,Routes} from "@angular/router";
我们要创建一个嵌套路由，所以需要创建以下文件@H_874_3@
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@H_874_3@
开始配置@H_874_3@
index.html界面配置两点@H_874_3@
<head>标签中引入 <Meta href="/" /> 引入路由代码显示标签 引入主组件标签 <my-app></my-app>
就这么简单， index.html界面配置完毕@H_874_3@
app.module.ts界面配置路由@H_874_3@
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 { }
这样就完成了嵌套路由的配置@H_874_3@
app.component.ts@H_874_3@
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@H_874_3@
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@H_874_3@
import {Component} from "@angular/core" @Component({ SELEctor: "my-list-one",template:` {{name}} ` }) export class ListOneComponent { name = "list-one"; }
list-two.component.ts同理@H_874_3@
获取路由参数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"} }); } } ---------------------- 路由： { path: 'contacts-detail/:id',component: ContactsDetailComponent },跳转 界面跳转： {{row.instiD}} <a (click)="contactscheck(row)"><i class="fa fa-delete"></i>审核</a> <a class="fa fa-editor" [routerLink]="['../contacts-detail/'+ row.instid]">查看详情</a> 方法跳转： contactscheck(value: any) { console.log(value); this.router.navigate(['./contacts/contacts-detail',value.instid]); } ---------------------- 直接获取id值 this.route.snapshot.params["id"]
补助： 路由中的界面跳转
import {Router} from "@angular/router"; constructor(public router: Router) { // 相当于window.LOCATIOn.href，界面跳转 router.navigateByUrl('home'); }
以上是大佬教程为你收集整理的angular2 ng2-router 路由，嵌套路由详解全部内容，希望文章能够帮你解决angular2 ng2-router 路由，嵌套路由详解所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。