Angular 4 中的动态嵌套路由器插座使用情况
Dynamic Nested router-outlet usage in Angular 4
Angular 4
中的动态嵌套路由器插座使用
我有一个简单的 Angular CLI,带有 angular 的动态路由。
在我的应用程序中,我有 2 个不同的页面,例如主页和关于。在该主页中,我想插入更多具有动态内容的主题。所以我在主页中包含了嵌套路由器。在导航嵌套内容时,它会替换为根元素。我附上了在线样本,请检查。谁能为此提供解决方案。
路由器配置
import { Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';
import { HomeNestComponent } from './home/homenest/homenest.component';
export const rootRouterConfig: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'home/homenest', component: HomeNestComponent },
];
在路由器配置中进行以下更改。
import { Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';
import { HomeNestComponent } from './home/homenest/homenest.component';
export const rootRouterConfig: Routes = [
{ path: 'home', component: HomeComponent,
children:[{ path: 'homenest', component: HomeNestComponent }]
},
{ path: 'about', component: AboutComponent },
{ path: 'homenest', component: HomeNestComponent },
];
home.component.ts 的变化。
public homeNestClick(e) {
this.router.navigateByUrl('/home/homenest');
}
https://stackblitz.com/edit/angular-tf7ru3?file=src/app/home/home.component.ts
Angular 4
中的动态嵌套路由器插座使用我有一个简单的 Angular CLI,带有 angular 的动态路由。
在我的应用程序中,我有 2 个不同的页面,例如主页和关于。在该主页中,我想插入更多具有动态内容的主题。所以我在主页中包含了嵌套路由器。在导航嵌套内容时,它会替换为根元素。我附上了在线样本,请检查。谁能为此提供解决方案。
路由器配置
import { Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';
import { HomeNestComponent } from './home/homenest/homenest.component';
export const rootRouterConfig: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'home/homenest', component: HomeNestComponent },
];
在路由器配置中进行以下更改。
import { Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';
import { HomeNestComponent } from './home/homenest/homenest.component';
export const rootRouterConfig: Routes = [
{ path: 'home', component: HomeComponent,
children:[{ path: 'homenest', component: HomeNestComponent }]
},
{ path: 'about', component: AboutComponent },
{ path: 'homenest', component: HomeNestComponent },
];
home.component.ts 的变化。
public homeNestClick(e) {
this.router.navigateByUrl('/home/homenest');
}
https://stackblitz.com/edit/angular-tf7ru3?file=src/app/home/home.component.ts