Часто требуется показать элемент при нажатии кнопки или ссылки и снова скрыть его при нажатии.
Проще говоря, переключать отображение элементов при каждом нажатии.
Практическим примером этого сценария является кнопка уведомления на Facebook.
При нажатии появляется список уведомлений, а при повторном нажатии список исчезает.
В этом посте будет объяснено несколько методов, с помощью которых это можно сделать в angular.
1. Использование скрытого свойства
Добавьте собственное свойство HTML hidden
к элементу, который необходимо переключить. Когда значение свойства hidden
равно true
, элемент не отображается.
Точно так же, когда оно равно false
, элемент отображается.
Привяжите свойство hidden
к свойству компонента типа boolean
, чтобы оно могло иметь только значение true
или false
.
Пример
Ниже приведен HTML-шаблон компонента, содержащего div
и button
. Когда эта кнопка нажата, div
переключает свое отображение.
<html> <title>Element toggle in angular</title> <body> <div [hidden] = “isShow”>This is a div which toggles.</div> <button (click) = toggleDisplay()>Toggle</button> </body> </html>
Ниже приведен соответствующий класс компонента, который содержит свойство isShow
, управляющее отображением div, и функцию toggleDisplay
, которая обрабатывает событие нажатия кнопки.
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.less'] }) export class AppComponent { isShow = false; toggleDisplay() { this.isShow = !this.isShow; } }
Эта функция изменяет значение свойства isShow
при нажатии кнопки.
Изначально для свойства isShow
установлено значение false
, что означает, что div
отображается.
При нажатии на button
для свойства isShow
устанавливается значение false
, а div
не отображается.
2. директива ngIf
Директива ngIf
применяется к элементу и связана со свойством компонента или условием.
Если условие оценивается как true
, элемент отображается иначе.
Вышеприведенный пример можно изменить, чтобы использовать ngIf
, как показано ниже.
<html> <title>Element toggle in angular</title> <body> <div *ngIf = “!isShow”>This is a div which toggles.</div> <button (click) = toggleDisplay()>Toggle</button> </body> </html>
Класс компонента для этого подхода такой же, как и для более раннего метода, поскольку логика не меняется.
Обратите внимание, что условием для ngIf
является !isShow
, чтобы элемент div отображался при загрузке страницы.
Это связано с тем, что мы инициализировали isShow
значением false
в классе компонента.
Разница между ngIf и скрытым свойством
hidden
делает элемент невидимым, пока он присутствует на странице. Он добавляет тот же эффект, что и применение свойства CSS display: none;
.
Если к элементу применяется директива ngIf
и его условие оценивается как false
, элемент удаляется со страницы, вы не увидите его в исходном коде.
Надеюсь, статья стоила потраченного времени.
Оригинал статьи здесь.
Вы также можете подписаться на мой канал YouTube, нажав здесь.