Перейдите к компоненту в другом модуле по нажатию кнопки

Question

У меня есть 2 разных модуля, один из которых является обычным модулем пользовательского интерфейса, в котором у меня есть компонент sso-Button, а другой - модуль SSO, в котором у меня есть initiatesso Component.

В компоненте sso-button есть кнопка, если щелкнуть эту кнопку, она будет перенаправлена ​​на компонент initiatesso.

Я попробовал следующий код.

Модуль: Модуль CommonUI SSO-button.component.html:

<button class="logo-button" (click)="alert()" style="position:absolute;"> 
</button>

SSO-button.component.ts:

  public alert() {
    alert("");
    this.router.navigateByUrl(`initiatesso`);    
   }

Модуль: модуль SSO

sso.module.ts:

export const ssoRoutes: Routes = [

  {
    path: 'initiatesso',
    component: InitiatessoComponent
  }
];

@NgModule({
  imports: [    
    RouterModule.forChild(ssoRoutes),    
  ],
  declarations: [InitiatessoComponent],
  exports: [InitiatessoComponent]
})
export class SsoModule { }

initiatesso.component.html

 <p>initiatesso works!</p>

initiatesso.component.ts

export class InitiatessoComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

Но при нажатии кнопки я не могу перенаправить на страницу initiatesso, не уверен, где я иду не так. Пожалуйста, помогите.

Answer 1

Для модуля пользовательского интерфейса вам необходимо импортировать свой SsoModule

Таким образом, ваш код будет выглядеть следующим образом

    @NgModule({
      bootstrap: [AppComponent],
      imports: [
        SsoModule,
        RouterModule.forRoot(mainRoutes)
      ]

Тогда в вашей основной маршрутизации вам нужно добавить вашу маршрутизацию sso

export const mainRoutes: Routes = [

  {
    path: 'initiatesso',
    component: InitiatessoComponent
  }
]; 

И измените свой код SSOModule на этот

export const ssoRoutes: Routes = [

  {
    path: '',
    component: InitiatessoComponent
  }
];

@NgModule({
  imports: [    
    RouterModule.forChild(ssoRoutes),    
  ],
  declarations: [InitiatessoComponent],
  exports: [InitiatessoComponent]
})
export class SsoModule { }

RouterModule.forChild используется, когда у вас есть дополнительный маршрут для модуля, например, поэтому вам нужно только определить дополнительный маршрут в модуле Route для вашего модуля SSOкак

export const ssoRoutes: Routes = [

  {
    path: '',
    component: InitiatessoComponent
  },
  {
    path: 'abc',
    component: InitiatessoABCComponent
  }
];

module / abc /

Так что теперь вы можете использовать

this.router.navigateByUrl(`initiatesso`);   

Пожалуйста, дайте мне знать, если вам нужна помощь