В чем разница между [скрытым] и [class.hide] в Angular 7? - PullRequest
Новая
       13

В чем разница между [скрытым] и [class.hide] в Angular 7?

0 голосов
/ 24 июня 2019

Я добавил несколько экземпляров компонента, используя *ngFor, потому что мне нужно, чтобы все экземпляры были доступны в QueryList. Затем я использовал [hidden], чтобы попытаться скрыть некоторые компоненты на основе выражения, возвращающего логическое значение. Это не сработало, но с использованием [class.hide]. Чем [class.hide] отличается от [hidden]? Мы обеспокоены тем, что нам может понадобиться изменить код в другом месте приложения, которое использует [hidden].

Ответы [ 3 ]

0 голосов
/ 24 июня 2019

Чем [class.hide] отличается от [hidden]?

Привязка к [hidden] приведет к условному добавлению атрибута hidden к элементу html.

HTML скрытый атрибут

Когда он присутствует, он указывает, что элемент еще не является или более не является релевантным.

Браузеры не должны отображать элементы, у которых указан скрытый атрибут.

Привязка к [class.hide] приведет к условному добавлению класса с именем hide к элементу html. Затем вам также необходимо определить стиль для класса hide (в указанном файле .css или в атрибуте компонента ). Потому что это стиль, который вы можете заставить .hide делать, что хотите. Одним из примеров будет такой: 

.hide {
  display: none !important;
}

То, что следует использовать , зависит от контекста и вашей конечной цели. Я не вижу проблемы применения [hidden] непосредственно к компоненту, хотя. Если у вас возникла такая проблема, я бы порекомендовал вам отредактировать ваш вопрос и включить достаточно кода для создания проверяемого примера.

0 голосов
/ 24 июня 2019

Использование [hidden] в angular скомпилирует шаблон и установит атрибут элемента HTML на hidden.Любой элемент, имеющий атрибут as, не будет отображаться браузером.

Также я создал пример кода, который использует атрибут [hidden] и работает нормально.https://embed.plnkr.co/plunk/a3gdJp

0 голосов
/ 24 июня 2019

При использовании [hidden] angular просто устанавливает атрибут HTML «скрытый»

Пользовательские агенты должны скрывать элементы с этим атрибутом, но предостережение заключается в том, что если элемент имеет другойявно указан стиль отображения, он получит приоритет.

Примечание. Изменение значения свойства отображения CSS для элемента со скрытым атрибутом отменяет поведение.Например, элементы в стиле display: flex будут отображаться независимо от наличия скрытого атрибута.

В следующем примере показано, как div не скрывается даже при добавлении атрибута hidden. 

div {
  display: block
}
<p hidden> Paragraph - Hide Me</p>
<div hidden> Div - Hide Me</div>

Мы обеспокоены тем, что нам может понадобиться изменить код в другом месте приложения, которое использует [hidden]

Есливы хотите использовать атрибут hidden вместо класса, вы можете просто добавить стиль для атрибута hidden в свой css: 

[hidden] {
  display: none !important;
}

div.show {
  display: block
}
<div class="show" hidden> Div - Hide Me</div>

Идея состоит в том, чтобы пойти с одной стратегией, а не смешивать [hidden] и [class.hide]

[class.hide] будет простодобавьте / удалите класс hide для элемента, и вы должны добавить правило стиля для hide в свой CSS.Здесь вышеупомянутого предостережения нет.

.hide {
  display: none;
}
<p class="hide">Hide Me</p>
...