带命名插座的角形路由器链接(角形5.0.2) [英] Angular routerLink with named outlet (angular 5.0.2)

问题描述

我已经阅读了有关此问题的所有文章，但没有一个对我有用.

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

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>

该路由器链接可以在标准的角度app.component.html中完美地工作，但不能在任何其他组件中正常工作.它总是导致错误:无法匹配任何路由.URL段:".

我删除命名的插座，并将routerLink更改为... 在应用程序组件中<a routerLink="hellocontent">action</a>或在另一个组件中<a routerLink="/hellocontent">action</a>，它可以完美运行，但仅在主出口中.

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

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

这种预期的行为是，只能从定义它们的组件内部访问命名的插座吗?奇怪的是，我的大多数html包装程序都在app.component.html中，但是除主要出口以外的任何内容都无法在其他组件中使用.

解决方案

我认为您对命名路由器出口感到困惑.路由器出口位于任何组件的顶部，用于加载子组件.

问题是，当您将其放置在组件顶部，然后尝试加载必须更改定义路径的Route时，它必须是Route参数而不是Route，因为如果您希望为子路由使用子级的子组件加载它.

> 工作示例

对于儿童路线

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>

I've read all the posts regarding this issue, but none of them work for me.

I have one app module, one routing module, and no other "modules". What I'm finding is that...

1. standard routes can be linked to from any component
2. routes with named outlets can only be linked to from the default app component only, but not other components
3. using routerLink to link to a named outlet from anything other than the app component results in "Error: Cannot match any routes. URL Segment:"

My route is this...

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

The routerLink is...

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

My router outlets are...

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

That router link works perfectly in a standard angular app.component.html, but NOT any other component. It always results in the "Error: Cannot match any routes. URL Segment:".

As soon as I remove the named outlet, and change the routerLink to... <a routerLink="hellocontent">action</a> in app component, or <a routerLink="/hellocontent">action</a> in another component, it works perfectly, but only in the primary outlet.

As it may be important, the components I'm linking from are of course defined in their own routes as well, for example...

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

Is this expected behaviour, that named outlets are only accessible from within the components that they are defined in? It's just weird that most of my html wrapper is within app.component.html, but anything other than the primary outlet will not work from another component.

解决方案

I think you are confused with Named Router Outlet. Router Outlet sits on Top of any component and is used to load Child Components.

The Problem is when you place it on top of a Component and then try and load the Route the Path defined has to be changed accordindly , It has to be a Route param rather than a Route as the route path becomes Nested if you want to load it for the component sub routes make use of children.

Working Example

For Child Routes

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>

这篇关于带命名插座的角形路由器链接(角形5.0.2)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！