,实现ng2-router路由,嵌套路由
首先配置angular2的时候路由器模块已经下载,只需要引入即可
从“@angular进口{RouterModule,路线}/路由器”;
我们要创建一个嵌套路由,所以需要创建以下文件
<李> 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李
<李>列表中包含嵌套路由,选项卡页
<李>单机”标签一“加载list-one.component.ts李
<李>单机”标签二”加载list-one.component.ts李
<强>开始配置
索引。html界面配置两点
& lt; head>标签中引入& lt;元href=" https://www.yisu.com/" rel="外部nofollow”/祝辞
引入路由代码显示标签引入主组件标签& lt; my-app> & lt;/my-app>
就这么简单,index . html界面配置完毕
<强> app.module。ts界面配置路由
从“@angular/platform-browser”进口{BrowserModule};
从“@angular进口{NgModule}/核心”;
从“@angular进口{RouterModule,路线}/路由器”;//表单双向数据绑定
从“@angular进口{FormsModule}/形式”;
从“进口{AppComponent}。/app.component”;//列表中包含两个标签子组件
从“进口{ListComponent}。/list.component”;
从“进口{ListOneComponent}。/list-one.component”;
从“进口{ListTwoComponent}。/list-two.component”;
从“进口{HomeComponent}。/home.component”;//定义路,由引导默认加载组件就是AppComponent,所以他就是主页导航页,然后添加的路由都在他的模板中。//可以所有代码写在NgModule中,也可以这样自定义常量,然后使用。//定义常量嵌套自路由
const appChildRoutes:路线=(
{路径:“一”,组件:ListOneComponent},
{路径:“两个”,组件:ListTwoComponent},//如果地址栏中输入没有定义的路由就跳转到一个路由界面
{
redirectTo路径:“* *”:“一”
}
];//定义常量路由
const appRoutes:路线=(
{路径:“组件:HomeComponent},
{
路径:“列表”,
组件:ListComponent,
孩子们:appChildRoutes
];//引用定义的路由
@NgModule ({
进口:[
BrowserModule,
FormsModule,
RouterModule.forRoot (appRoutes)
),
声明:[
AppComponent,
ListComponent,
HomeComponent,
ListOneComponent,
ListTwoComponent
),
引导(AppComponent):
}）
出口类AppModule {
}
之前
这样就完成了嵌套路由的配置
显示路由内容
app.component.ts
从“@angular/进口}{组件核心”;
@ component ({
选择器:“我的程序”,//templateUrl:“. ./视图/one.html”
模板:
& lt; div>
& lt; !——使用了引导样式的导航,routerLinkActive,表示路由激活的时候,谈价活跃类样式——比;
& lt; ul类=皀av navbar-nav”比;
& lt;李routerLinkActive=盎钤尽弊４? lt; routerLink=凹摇痹谑滓? lt;/a> & lt;/li>
& lt;李routerLinkActive=盎钤尽弊４? lt; routerLink=敖哟ァ弊４橇滴颐? lt;/a> & lt;/li>
& lt;李routerLinkActive=盎钤尽弊４? lt; routerLink=安贰痹诓? lt;/a> & lt;/li>
& lt;/ul>
& lt; !——路由内容显示区域——比;
& lt; router-outlet> & lt;/router-outlet>
& lt;/div>
｀
}）
出口类AppComponent {
}
之前
list.component.ts
从“@angular/进口}{组件核心”;
@ component ({
选择器:“列表”,//templateUrl:“. ./视图/list.html”
模板:
& lt; div>
& lt; !——子路由连接——比;
& lt; routerLink=" 1 "祝辞one
& lt; routerLink="两个“祝辞two
& lt; !——路由内容显示标签——比;
& lt; router-outlet> & lt;/router-outlet>
& lt;/div>
｀
}）
出口类ListComponent {
name="列表";
}
之前
list-one.component.ts
