Question

我的应用程序中有两个不相关的插座一个是未命名的插座，并且始终将正确的组件加载到其中。另一个名字却从未被加载

这是相关代码 App.component.html

div

App.Module.ts

  <div class="container">
    <app-menu></app-menu>
    <!-- <app-graph-wrapper></app-graph-wrapper> -->
    <router-outlet name = "topbar"></router-outlet>
    <div class="row main-content">
      <div class="two columns" #sidebar><app-side-bar></app-side-bar></div>
      <div class="hide-button" #button><img src="{{icon}}" (click) = "toggleSidebar()" /></div>
      <div class="ten columns" #table>
        <router-outlet></router-outlet>
      </div>
    </div>
  </div>

如html文件中所示，以前topbar outlet不存在，因为我只有一个组件，但是现在我需要根据视图加载不同的组件

UPDATE 我在app.module.ts

中完成了以下更改

const appRoutes: Routes = [

  { path: 'dashboard', component: AlertTableComponent},
  { path: 'dashboard', component: GraphWrapperComponent, outlet: 'topbar'}

];

所以现在我可以看到整个事情，如果我输入网址http://localhost:4200/dashboard(topbar:dashboardBar)

但是我的链接现在已经破了我尝试过使用RouterLink指令的无穷无尽的组合

const appRoutes: Routes = [

  {path: '', redirectTo: 'dashboard', pathMatch: 'full'},
  {path: 'dashboard', component: AlertTableComponent},
  { path: 'dashboardBar', component: GraphWrapperComponent, outlet: 'topbar'},


   { path: 'compliance', component: ComplianceTableComponent },
   { path: 'complianceBar', component: GraphWrapperComponent, outlet: 'topbar'},

  { path: 'network', component: NetworkTableComponent },
  { path: 'networkBar', component: NetworkTopbarComponent, outlet: 'topbar'}
];

然而我在控制台上什么都没得到，屏幕上什么都没发生

Answer 1

我能够使用以下组合解决这个问题首先在我的app.module中添加了这些路线 {路径：＆＃39;仪表板＆＃39;，组件：AlertWrapperComponent}，

  { path: 'operations', component: OverviewWrapperComponent, children : [
      {path: 'event', component: EventTableComponent},
      {path: 'device', component: DeviceTableComponent},
      {path: 'job', component: JobTableComponent},
      {path: '', component: ComplianceTableComponent}
    ]

所以当用户进入/ operations时，他总会看到其wtml看起来像这样的OverviewWrapperComponent

<app-overview-topbar></app-overview-topbar>
<div class="row main-content">
  <div class="twelve columns">
    <!-- <app-network-table></app-network-table> -->
    <router-outlet></router-outlet>
  </div>
</div>

这个路由器插座会根据网址注入正确的组件所以/ operations / device将显示DeviceTableComponent

我的主要html页面 - app.component.html看起来像这样

<div class="container">
  <app-menu></app-menu>
  <router-outlet></router-outlet>
</div>

所以我基本上有两个未命名的组件，不需要使用命名的组件

Angular2命名为router-outlet，不能与RouterLink一起使用

1 个答案: