无法在Angular中设置到命名插座的路由 [英] Can't set up routing to a named outlet in Angular

问题描述

我有三个命名的路由器插座，如下所示.

I have three named router outlets as shown below.

...
<router-outlet name="menus"><router-outlet>
<router-outlet><router-outlet>
<router-outlet name="footer"><router-outlet>
...

在标记中，我要将第一个菜单 路由到其中具有某些子菜单垃圾的组件，作为显示在文档中.

In the markup I want to route the first one, menus, to a component with certain submenu junk in it as shown in the docs.

<ul *ngFor="let main of menus;" 
    routerLink="[{outlets:{menus:[{{main.link}}]}}]" 
    class="nav-items">{{main.header}}

我得到的错误是这样的:

The error I'm getting says that:

错误:无法匹配任何路由.URL段:'％5B％7Boutlets:％7Bmenus:％5Bsubmenu1％5D％7D％7D％5D'

Error: Cannot match any routes. URL Segment: '%5B%7Boutlets:%7Bmenus:%5Bsubmenu1%5D%7D%7D%5D'

不知所措语法有什么问题.仔细检查我的指甲，但没有找到 routerLink 版本的简单粗暴示例，该示例显示如何在命名插座中指向路线.

Am at a loss what's wrong with the syntax. Googling my fingernails off but haven't found a simple and crude example of a routerLink version showing how to point a route in a named outlet.

编辑:基于注释和示例，我需要重新编写所使用的代码，但仍存在相同的错误.在标记中:

Based on the comments and samples, I need to reformulate the code being used, still with the same error. In the markup:

<ul *ngFor="let main of menus;" 
    (click)="pullMenu(main.link)" 
    class="nav-items">{{main.header}}

然后，在TS中:

constructor(private router: Router, private route: ActivatedRoute) { }

pullSubmenu(input) {
  console.log(input);
  this.router.navigate(
    [{ outlets: { menus: [input] } }], 
    { relativeTo: this.route });
}

现在，出现以下错误( submenu1 是已配置路径的名称).

Now, I'm getting the following error (submenu1 is the name of configured path).

错误:无法匹配任何路由.网址段:"submenu1"

Error: Cannot match any routes. URL Segment: 'submenu1'

我的路由是在这样的模块中设置的.

My routing is set up in the module like this.

const routes: Routes = [
  { path: "submenu1", component: Submenu1Component },
  { path: "submenu2", component: Submenu2Component }
];

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    MainAreaComponent,
    Submenu1Component,
    Submenu2Component
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

推荐答案

您需要使用评估版 [routerLink] :

<ul *ngFor="let main of menus;" 
    [routerLink]="[{outlets:{menus:[{{main.link}}]}}]" 
    class="nav-items">{{main.header}}

作为替代方案，您可以模拟 routerLink .这是其作用的要点:

As an alternative you can emulate the routerLink. Here is the gist of what it does:

  @HostListener('click')
  onClick(): boolean {
    const extras = {
      skipLocationChange: attrBoolValue(this.skipLocationChange),
      replaceUrl: attrBoolValue(this.replaceUrl),
    };
    this.router.navigateByUrl(this.urlTree, extras);
    return true;
  }

因此，这是使用 navigate 而不是 navigateByUrl 的设置:

So, here is the setup using navigate instead of navigateByUrl:

   @Component({
      template: `
        <ul *ngFor="let main of menus;" (click)="[{outlets:{menus:[{{main.link}}]}}])"
        class="nav-items">{{main.header}}
      `
   ...
   class MyComponent {
      constructor(router: Router, route: ActivatedRoute) {}

      navigate(commands) {
         this.router.navigate(commands, {relativeTo: this.route})

您不能使用 routerLink 的未评估版本，因为它会将命令作为字符串读取，并且如果命令中包含 outlets ，则字符串不起作用.请参阅 routerLink属性的辅助路由URL导航以了解原因.

You can't use unevaluated version of routerLink because it reads commands as a string and if you have outletsin the commands strings don't work. See Navigation to secondary route URL for routerLink attribute to understand why.

这篇关于无法在Angular中设置到命名插座的路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！