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

Question

我有 2 个不同的模块，一个是通用 UI 模块，其中我有 sso-Button 组件，另一个是 SSO 模块，其中我有initialsso 组件。

sso-button 组件中有一个按钮，如果单击该按钮，它应该重定向到initialsso 组件。

我试过以下代码。

模块：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.module.ts：

export const ssoRoutes: Routes = [

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

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

启动so.component.html

initiatesso works!

启动so.component.ts

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

但是在单击按钮时，我无法重定向到启动页面，不确定我哪里出错了。 请帮忙。

Answer 1

对于 UI 模块，您需要导入 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 当你有模块的子路由时使用，所以你只需要在路由模块中为你的 SSO 模块定义子路由，比如

export const ssoRoutes: Routes = [

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

模块/ABC/

所以现在你可以使用

this.router.navigateByUrl(`initiatesso`);   

如果您需要任何帮助，请告诉我