如何根据用户点击角度显示数据

Posted 2023-02-18

【中文标题】如何根据用户点击角度显示数据

【英文标题】：How to display the data based on the user click in angular

【发布时间】：2021-05-09 20:06:27

【问题描述】：

我在 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 模板。

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

【问题讨论】：

把 放在你的 中，然后根据路由器导航显示内容

【参考方案1】：

有多种实现方式，具体取决于您的应用架构和您的用例。

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