クリックするとツリーノードごとに異なるコンポーネントを表示する方法は？

Question

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> 

Answer 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