首页 文章

具有命名插座的角度routerLink（角度5.0.2）

提问于
浏览 次
2

我已经阅读了有关此问题的所有帖子，但它们都不适合我 .

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

  • 标准路线可以从任何组件链接
    具有命名出口的

  • 路由只能链接到默认应用程序组件，而不能链接到其他组件

  • 使用routerLink从应用程序组件以外的任何内容链接到指定的插座导致"Error: Cannot match any routes. URL Segment:"

我的路线是......

{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中，这很奇怪，但主插座以外的任何东西都无法在其他组件中运行 .

angular

1 回答

  • 0

    我认为你对命名路由器插座感到困惑 . 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>
    回复于

相关问题