我在Angular 4项目中使用angular-tree-component
。我想在单击节点时在主页中显示一个组件。相反,当我单击一个节点时,它会显示节点组件,但主页元素已消失。
这是显示树节点的主页组件中的代码:
<div class="Tree">
<tree-root [nodes]="nodes">
<ng-template #treeNodeTemplate let-node let-index="index">
<a routerLink="{{node.data.name}}" routerLinkActive="active" ><span>{{
node.data.name }}</span></a>
</ng-template>
</tree-root>
</div>
答案 0 :(得分:1)
您需要使用第二个<router-outlet>
,如下例所示:
@Component({
selector: 'my-app',
template: `
<router-outlet></router-outlet>
`
})
export class AppComponent {
}
@Component({
template: `
<h3 class="title">Dashboard</h3>
<nav>
<a routerLink="users" routerLinkActive="active" >Users</a>
<a routerLink="profile" routerLinkActive="active" >Profile</a>
</nav>
<hr />
<router-outlet></router-outlet>
`
})
export class DashboardComponent {
}
@Component({
template: `
<h3 class="title">Profile</h3>
`
})
export class ProfileComponent {
}
@Component({
template: `
<h3 class="title">Users</h3>
`
})
export class UsersComponent {
}
定义路线:
{
path: '',
redirectTo: '/dashboard/users',
pathMatch: 'full'
},
{
path : 'dashboard',
component: DashboardComponent,
children:[
{
path : 'users',
component: UsersComponent
},
{
path : 'profile',
component: ProfileComponent
}
]
}
<强> DEMO 强>