-1

我在 app.component.html 中使用角材料添加了工具栏和侧导航栏。

app.component.html

<div>
   <mat-sidenav-container class="main-container">
     <mat-sidenav #sideBarRef opened mode="side" [(opened)]='isSideBarOpen'>
     <mat-nav-list>
       <a mat-list-item href="#"> Home </a>        
       <a mat-list-item href="#"> Project Updates </a>        
       <a mat-list-item href="#"> General Updates </a>
       <a mat-list-item href="#"> Help </a>
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>
     <mat-toolbar color="primary">
        <button (click)='sideBarRef.toggle()'><mat-icon>menu</mat-icon></button>
           My Application
     </mat-toolbar>
  </mat-sidenav-content>
</mat-sidenav-container>
</div>

在 UI 中，它如下所示。 在此处输入图像描述

到目前为止，我的应用程序中只有一个组件，即应用程序组件。现在我想为主页左侧的每个按钮开发不同的组件。当用户单击任何按钮时，我想在这些按钮上显示相应的 html 模板。

我该如何实施？我感谢您的帮助。

4

1 回答 1

0

有多种方法可以实现这一点，具体取决于您的应用架构和您的用例。

  • 如果当用户单击 A 时，它会同时更改数据和显示，例如管理界面允许在 3 个侧面按钮上管理用户、组、应用程序，在主组件中使用 a，为每个显示创建一个路由/组件，并使用路由器路由用户- 每个按钮的链接。
  • 如果显示保持不变，但按钮只是更改基础数据，请使用智能组件来构建视图，1 个演示组件来构建左侧面板，可观察的数据由使用输入/输出单击哪个按钮过滤，以及 1演示组件使用智能组件发送的数据进行主显示。或者使用状态（ngrx）、点击动作、选择器向主组件提供数据。
于 2021-02-05T13:42:28.227 回答