使用角材料中的按钮单击事件显示/隐藏图像

Question

我使用的是角形材质，我有两个组件，即侧面导航栏和工具栏，我想根据侧面导航栏是关闭还是打开来显示两个不同的图像。如果打开，我希望图像显示在其中，否则显示在工具栏上。

我想知道如何在按钮上显示或隐藏图像

(click)=drawer.toggle();

Answer 1

您可以将图像同时添加到工具栏和侧边栏，并将*ngIf添加到这两个图像，以确定是否根据侧边栏是打开还是关闭来渲染它。侧边栏中的是：

<img *ngIf="sidenav.opened" src="https://angular.io/generated/images/marketing/features/feature-icon.svg" />

*ngIf="sidenav.opened"将确保仅在打开侧边栏时才渲染图像。

工具栏中的图像为：

<img *ngIf="!sidenav.opened" src="https://angular.io/generated/images/marketing/features/feature-icon.svg" />

*ngIf="!sidenav.opened"将确保仅在关闭侧边栏时才渲染图像。

在sidenav上调用toggle()时，sidenav的opened属性会自动更新，因此我们绑定到该属性的任何内容（即图像）都会相应更新。

请参阅this StackBlitz进行演示。单击“切换侧栏”按钮以在打开和关闭之间切换侧栏，图像将显示在工具栏（如果侧栏关闭）和侧栏中（如果侧栏打开）。