Question

我想使用Component作为模板，然后我有router-outlet注入子组件。

我知道我可以使用children路由轻松完成，所以我按照以下方式执行此操作。

我的路线：

export const routes: Routes = [
  { path: 'main', component: TemplateComponent, children: childRoutes }
];

export const childRoutes: Routes = [
  { path: 'page-one', component: PageOneComponent }
];

TemplateComponent：

<div class="some-awesome-template">
  <router-outlet></router-outlet>
</div>

只要我有一个跟随模式/**/*;

的网址，这就可以正常工作

我的问题是我想将此模板逻辑用于没有子网址的网页，例如： /about。

现在我这样做：

about路线：

{ path: 'about', component: TemplateComponent }

然后TemplateComponent看起来像这样：

<div class="some-awesome-template">
  <span [ngSwitch]="variableWithCurrentUrl">
    <span *ngSwitchCase="'about'">
      <app-about></app-about>
    </span>
    <router-outlet *ngSwitchDefault></router-outlet>
  </span>
</div>

这样做有效，但我想使用router-outlet来注入AboutComponent，就好像它是一个子网址，而不是手动执行它。

但重要的是，不是每个/**路由都会获取模板，因此，例如/contact，就有自己的模板。

有可能吗？

Answer 1

您可以使用main路由，其中TemplateComponent将被分配，并且它将成为根路由的子代：

export const childRoutes: Routes = [
  { path: '', 
    component: AppComponent
    children: [{
       path: 'main',
       component:TemplateComponent,
       children: childRoutes
    }, 
    {
       path: 'contract', 
       component: ContractComponent
    }
    ]
  }
];

<强> app.component.template：

<router-outlet></router-outlet>

然后/contract不使用组件：TemplateComponent
/main之后的所有路线都将分配TemplateComponent模板

角度5模板与路由器出口没有子网址

1 个答案: