在Angular的选项卡式模态中正确布线

Question

I created a modal using MatDialog. This Modal opens a component that has a tabbed page inside.

this.dialog.open(AuthComponent, dialogConfig);

I used the mat-tab-nav-bar to open the two tabbed components for Login and Register.

<nav mat-tab-nav-bar mat-align-tabs="center">
        <a mat-tab-link
           *ngFor="let link of navLinks"
           [routerLink]="link.path"
           routerLinkActive #rla="routerLinkActive"
           [active]="rla.isActive">
          {{link.label}}
        </a>
      </nav>

      <router-outlet></router-outlet>

To open the modal works fine, but the login component is not loaded when i open the modal. I first have to click on the link.

"Click on Login"

My routing looks pretty straight forward:

{ path: 'signup', component: SignupComponent},

{ path: 'login',  component: LoginComponent},

Do you have any thoughts? Jakob

Answer 1

Try this:

export class AuthComponent implements OnInit {    

  constructor(private router: Router) {}

  ngOnInit() {
    this.router.navigate(['signup'])        
  }
}