Показать / Скрыть изображения, используя событие нажатия кнопки в угловом материале

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" обеспечит отображение изображения только в том случае, если боковая панель закрыта.

Когда вызывается toggle() в sidenav, свойство opened sidenav автоматически обновляется,поэтому все, что мы связываем с этим свойством (то есть изображения), будет обновляться соответствующим образом.

Пожалуйста, посмотрите this StackBlitz для демонстрации.Нажмите кнопку «Переключить боковую панель», чтобы переключить боковую панель между открытой и закрытой, и изображение отобразится на панели инструментов (если боковая панель закрыта) и на боковой панели (если боковая панель открыта).