Angular use string as outlet name-CodePudding

I need to use string varible as outletname rr

this is my code:

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

CodePudding user response：

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

CodePudding user response：

If you want to give router outlet a name and to render components inside that outlet by using the router-outlet name, then the below solution works.

Step 1: Name the router-outlet tag using name attribute, In your case

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

Step 2: Add the below code to that redirect button.

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

Step 3: in app-routing.module.ts file give the out-let name, In your case

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

The above solution worked for me.