单击按钮导航到不同模块上的组件

Question

I have 2 different modules, one is common UI module in which I have sso-Button Component, and other one is SSO Module, in which I have initiatesso Component.

There is a button in sso-button component, if click that button, it should redirect to initiatesso component.

I have tried following code.

Module: CommonUI Module 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`);    
   }

Module: SSO Module

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

initiatesso works!

initiatesso.component.ts

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

But on the button click I am not able to redirect to the initiatesso page, not sure where I am going wrong. Please help.

Answer 1

For UI module you need to import your SsoModule

So your code would look like this

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

Then in your main routing you need to add your sso routing

export const mainRoutes: Routes = [

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

And change your SSOModule code into this

export const ssoRoutes: Routes = [

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

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

RouterModule.forChild is use when you have sub route for the module like so you only need to define sub route in Route module for your SSO module like

export const ssoRoutes: Routes = [

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

module/abc/

So now you can use

this.router.navigateByUrl(`initiatesso`);   

Please let me know if you need any help