带有命名插座的角路由器链接（角5.0.2）

Question

我已阅读有关此问题的所有帖子，但没有一篇适合我。

我有一个应用模块，一个路由模块，没有其他“模块”。我的发现是……

1. 标准路由可以从任何组件链接到
2. 具有命名出口的路由只能从默认应用组件链接到，而不能从其他组件链接到
3. 使用 routerLink 从除应用程序组件以外的任何内容链接到命名插座会导致“错误：无法匹配任何路由。URL 段：”

我的路线是这样的……

{path: 'hellocontent', component: ContentHelloWorldComponentComponent,
pathMatch: 'full', outlet: 'helloc'},

routerLink 是...

<a [routerLink]="[{ outlets: { helloc: ['hellocontent'] } }]">action</a>.

我的路由器插座是...

<router-outlet name="helloc"></router-outlet>
<router-outlet></router-outlet>

该路由器链接在标准的 angular app.component.html 中完美运行，但在任何其他组件中都无法正常运行。它总是导致“错误：无法匹配任何路由。URL 段：”。

一旦我删除了命名的插座，并将 routerLink 更改为... <a routerLink="hellocontent">action</a> 在应用程序组件中，或<a routerLink="/hellocontent">action</a> 在另一个组件中，它可以完美地工作，但只能在主插座中。

因为它可能很重要，我链接的组件当然也定义在它们自己的路由中，例如...

{path: 'hello-world', component: HelloWorldComponentComponent}

这是预期的行为吗，命名的出口只能从定义它们的组件中访问？奇怪的是，我的大部分 html 包装器都在 app.component.html 中，但是除了主要出口之外的任何东西都不能在另一个组件中工作。

Answer 1

我认为您对命名路由器插座感到困惑。 Router Outlet 位于任何组件的顶部，用于加载子组件。

问题是当您将其放置在组件顶部然后尝试加载路径时，必须相应地更改定义的路径，它必须是 Route 参数而不是 Route，因为如果您将路径路径变为嵌套想要为组件子路由加载它使用子路由。

Working Example

对于子路由

const routes: Routes = [
  { path: 'stuff', component: AComponent, children:[
    { path: ':index', component: BComponent},
    { path: ':index/edit', component: EditComponent, outlet:'editsection'}
  ]}
];

<p>
  Detail section works! {{ index }}
 <button type="button"
   [routerLink]="['/stuff',{outlets:{editsection:':index/edit'}}]">Edit</button>
</p>