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

Question

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

我把它分成 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) 添加到菜单项并从更改为让我们说并保持相同的布局。只是为了能够仅将仪表板内容更改为我创建的任何其他组件

Answer 1

如果你已经完成了路由，请将此属性添加到 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');
};