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

Question

我已阅读有关此问题的所有帖子，但没有一个对我有用。

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

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

我的路线是这样...

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

路由器链接是...

<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 位于任何组件的顶部，用于加载子组件。

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

工作示例

对于子路线

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>