Angular 单击“角度”按钮时如何更改组件

我正在尝试创建此仪表板，我想知道如何在单击菜单链接时更改一个组件？

我把它分成3部分，就像那样

<div id="wrapper">
  <app-dashboard-menu></app-dashboard-menu>
  <div id="content-wrapper" class="d-flex flex-column">
    <div id="content">
      <app-dashboard-topbar></app-dashboard-topbar>
      <app-dashboard-content></app-dashboard-content>
    </div>
  </div>
</div>

---

我想知道如何将（onclick）添加到菜单项，并从更改为，比如说，保持相同的布局。如果您已经完成了路由，只需将仪表板内容更改为我创建的任何其他组件，就可以将此属性添加到html按钮标记中

<button type="button"  routerLink="/content">Content</button>

内容

或者，在component.ts中添加如下内容

<button type="button" (click)="btnClick()">Content</button>    

import { Router } from '@angular/router';

btnClick() {
        this.router.navigateByUrl('/content');
};

内容
从'@angular/Router'导入{Router}；
btnClick（）{
this.router.navigateByUrl（'/content'）；
};

如果您已经完成了路由，请将此属性添加到html按钮标记中

<button type="button"  routerLink="/content">Content</button>

内容

或者，在component.ts中添加如下内容

<button type="button" (click)="btnClick()">Content</button>    

import { Router } from '@angular/router';

btnClick() {
        this.router.navigateByUrl('/content');
};

内容
从'@angular/Router'导入{Router}；
btnClick（）{
this.router.navigateByUrl（'/content'）；
};

谢谢，但我使用了路由器插座，并声明它们是仪表板组件的子组件是的，路由器插座也需要我的答案。对不起，我之前不能提及，谢谢，但我使用了路由器插座并声明它们是仪表板组件的子组件是的，路由器插座需要我的答案。对不起，我以前没提过