如何在单击每个树节点时显示不同的组件？

Question

我正在使用angular-tree-component在一个角4项目。单击节点时，我希望在主页中显示组件。相反，当我单击一个节点时，它会显示节点组件，但是主页元素会消失。

这是我在主页组件中显示树节点的代码：

  <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
      }
   ]
  }

演示