Angular 使用字符串作为插座名称

Question

我需要使用字符串变量作为 outletname r

这是我的代码：

  public redirect(): any {
    let rr = 'productModal';
    let rr2 = 'm/addProduct';
    return this.router.navigate(    
      ['link/link', {outlets: {rr: rr2}}]
    );
  }

Answer 1

 public redirect(): any {
    let rr = 'productModal';
    let rr2 = 'm/addProduct';
    return this.router.navigate(    
      ['link/link', {outlets: {[rr]: rr2}}]
    );
  }

Answer 2

如果您想为路由器插座命名并使用路由器插座名称在该插座内呈现组件，则以下解决方案有效。

第 1 步：使用 name 属性命名 router-outlet 标签，在您的情况下

  <router-outlet #outlet="outlet" name="rr"></router-outlet>

第 2 步：将以下代码添加到该重定向按钮。

  [routerLink]="[{ outlets: {rr: ['m/addProduct']}} ]"

第 3 步：在 app-routing.module.ts 文件中提供出口名称，在您的情况下

        {path: 'm/addProduct',
        component: "Add product component",
        outlet: 'rr'}

以上解决方案对我有用。

Angular 使用字符串作为插座名称

Angular use string as outlet name

angular

router-outlet