Question

我已阅读有关此问题的所有帖子，但这些帖子都不适合我。

我有一个app模块，一个路由模块，没有其他＆＃34;模块＆＃34;。我发现的是......

标准路线可以从任何组件链接
具有指定出口的路由只能链接到默认应用程序组件，而不能链接到其他组件
使用routerLink从应用程序组件以外的任何内容链接到指定的插座导致＆＃34;错误：无法匹配任何路由。网址细分：＆＃34;

我的路线就是这个......

{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>

该路由器链接在标准角度app.component.html中完美运行，但不是任何其他组件。它总是导致＆＃34;错误：无法匹配任何路由。网址细分：＆＃34;。

一旦删除指定的插座，并将routerLink更改为... 应用程序组件中的<a routerLink="hellocontent">action</a>或其他组件中的<a routerLink="/hellocontent">action</a>，它可以完美运行，但只能在主要插座中使用。

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

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

这是预期的行为吗，命名出口只能从定义它们的组件中访问？我的大部分html包装器都在app.component.html中，这很奇怪，但主插座以外的任何东西都无法在其他组件中运行。

Answer 1

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

问题是，当你把它放在一个组件的顶部，然后尝试加载路径时，定义的路径必须被改变，它必须是一个路由参数而不是路由，因为如果你的路径路径变为嵌套想要为组件子路径加载它来使用子组件。

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>

具有命名出口的角度routerLink（角度5.0.2）

1 个答案: