Что эквивалентно ngShow и ngHide в Angular 2+?

У меня есть ряд элементов, которые я хочу видеть при определенных условиях.

В AngularJS я бы написал

<div ng-show="myVar">stuff</div>

Как я могу сделать это в Angular 2+?

Просто привязать к hiddenсобственности

[hidden]="!myVar"

Смотрите также

• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

вопросы

hiddenесть некоторые проблемы, потому что это может конфликтовать с CSS для displayсвойства.

Посмотрите, как someв Plunker пример не скрывается, потому что у него есть стиль

:host {display: block;}

набор. (Это может вести себя иначе в других браузерах - я тестировал с Chrome 50)

обходной путь

Вы можете исправить это, добавив

[hidden] { display: none !important;}

Для глобального стиля в index.html.

еще одна ловушка

hidden="false"
hidden="{{false}}"
hidden="{{isHidden}}" // isHidden = false;

такие же как

hidden="true"

и не покажет элемент.

hidden="false"назначит строку, "false"которая считается правдивой.
Только значение falseили удаление атрибута фактически сделает элемент видимым.

Использование {{}}также преобразует выражение в строку и не будет работать должным образом.

Только связывание с []будет работать как ожидалось, потому что это falseназначено falseвместо "false".

*ngIf против [hidden]

*ngIfэффективно удаляет его содержимое из DOM, в то время как [hidden]изменяет displayсвойство и только указывает браузеру не показывать содержимое, но DOM все еще содержит его.

Используйте [hidden]атрибут:

[hidden]="!myVar"

Или вы можете использовать *ngIf

*ngIf="myVar"

Это два способа показать / скрыть элемент. Разница лишь в том *ngIf, что элемент удаляется из DOM, а [hidden]браузер будет показывать / скрывать элемент, используя displayсвойство CSS , сохраняя элемент в DOM.

Я нахожусь в той же ситуации с разницей, чем в моем случае, элемент был гибким контейнером. Если это не ваш случай, можно легко обойти

[style.display]="!isLoading ? 'block' : 'none'"

в моем случае из-за того, что многие поддерживаемые нами браузеры все еще нуждаются в префиксе поставщика, чтобы избежать проблем, я выбрал другое простое решение

[class.is-loading]="isLoading"

где тогда CSS прост как

&.is-loading { display: none } 

чтобы затем оставить отображаемое состояние обработанным классом по умолчанию.

Извините, я не согласен с привязкой к скрытому, что считается небезопасным при использовании Angular 2. Это потому, что скрытый стиль можно легко перезаписать, например, используя

display: flex;

Рекомендуемый подход - использовать * ngIf, который безопаснее. Для более подробной информации, пожалуйста, обратитесь к официальному блогу Angular. 5 ошибок новичка, чтобы избежать с Angular 2

<div *ngIf="showGreeting">
   Hello, there!
</div>

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

Поэтому я создал событие щелчка для «ручного» переключения UL для отображения

<div class="dropdown">
    <button class="btn btn-default" (click)="manualtoggle()"  id="dropdownMenu1" >
    Seleccione una Ubicación
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" [ngStyle]="{display:displayddl}">
        <li *ngFor="let object of Array" (click)="selectLocation(location)">{{object.Value}}</li>                                
     </ul>
 </div>    

Затем в компоненте у меня есть атрибут showDropDown: bool, который я переключаю каждый раз, и на основе int устанавливаю displayDDL для стиля следующим образом

showDropDown:boolean;
displayddl:string;
manualtoggle(){
    this.showDropDown = !this.showDropDown;
    this.displayddl = this.showDropDown ? "inline" : "none";
}

Согласно документации Angular 1 для ngShow и ngHide , обе эти директивы добавляют стиль css display: none !important;к элементу в соответствии с условием этой директивы (для ngShow добавляется css для ложного значения, а для ngHide добавляется css для истинного значения).

Мы можем добиться такого поведения, используя Angular 2 директиву ngClass:

/* style.css */
.hide 
{
    display: none !important;
}

<!-- old angular1 ngShow -->
<div ng-show="ngShowVal"> I'm Angular1 ngShow... </div>

<!-- become new angular2 ngClass -->
<div [ngClass]="{ 'hide': !ngShowVal }"> I'm Angular2 ngShow... </div>

<!-- old angular2 ngHide -->
<div ng-hide="ngHideVal"> I'm Angular1 ngHide... </div>

<!-- become new angular2 ngClass -->
<div [ngClass]="{ 'hide': ngHideVal }"> I'm Angular2 ngHide... </div>

Обратите внимание, что для showповедения в Angular2 нам нужно добавить !(не) перед ngShowVal, а для hideповедения в Angular2 нам не нужно добавлять !(не) перед ngHideVal.

<div [hidden]="myExpression">

myExpression может иметь значение true или false

Если вы используете Bootstrap так просто, как это:

<div [class.hidden]="myBooleanValue"></div>

в начальной загрузке 4.0 класс "d-none" = "display: none! важный;"

<div [ngClass]="{'d-none': exp}"> </div>

Для всех, кто сталкивался с этой проблемой, я так и сделал.

import {Directive, ElementRef, Input, OnChanges, Renderer2} from "@angular/core";

@Directive({
  selector: '[hide]'
})
export class HideDirective implements OnChanges {
  @Input() hide: boolean;

  constructor(private renderer: Renderer2, private elRef: ElementRef) {}

  ngOnChanges() {
    if (this.hide) {
      this.renderer.setStyle(this.elRef.nativeElement, 'visibility', 'hidden');
    } else {
      this.renderer.setStyle(this.elRef.nativeElement, 'visibility', 'visible');
    }
  }
}

Я использовал, 'visibility'потому что я хотел сохранить пространство, занимаемое элементом. Если вы не хотите делать это, вы можете просто использовать 'display'и установить его 'none';

Вы можете привязать его к вашему HTML-элементу, динамически или нет.

<span hide="true"></span>

или

<span [hide]="anyBooleanExpression"></span>

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

HTML:

<input type="button" class="view form-control" value="View" [hidden]="true" />

CSS:

[hidden] {
   display: none;
}

вот что сработало для меня:

<div [style.visibility]="showThis ? 'visible' : 'hidden'">blah</div>

<div [hidden]="flagValue">
---content---
</div>

для меня [hidden]=!varникогда не работал.

Так, <div *ngIf="expression" style="display:none;">

И, <div *ngIf="expression">всегда давать правильные результаты.

Есть два примера на англоязычных документах https://angular.io/guide/structural-directives#why-remove-rather-than-hide

Директива может скрыть нежелательный абзац, установив для его стиля отображения значение none.

<p [style.display]="'block'">
  Expression sets display to "block".
  This paragraph is visible.
</p>

<p [style.display]="'none'">
  Expression sets display to "none".
  This paragraph is hidden but still in the DOM.
</p>

Вы можете использовать [style.display] = "block" "для замены ngShow и [style.display] =" none "" для замены ngHide.

Лучший способ справиться с этой проблемой с помощью ngIf Потому что это хорошо предотвращает рендеринг этого элемента в front-end,

Если вы используете [hidden]="true"стиль или скрыть [style.display]его, он будет скрывать только элемент в передней части, и кто-то может изменить значение и легко его увидеть. На мой взгляд, лучший способ скрыть элемент - этоngIf

<div *ngIf="myVar">stuff</div>

а также если у вас есть несколько элементов (необходимо также реализовать еще), вы можете использовать <ng-template>опцию

<ng-container *ngIf="myVar; then loadAdmin else loadMenu"></ng-container>
<ng-template #loadMenu>
     <div>loadMenu</div>
</ng-template>

<ng-template #loadAdmin>
     <div>loadAdmin</div>
</ng-template>  

образец кода ng-шаблона

Если вы просто хотите использовать симметричные hidden/ shownдирективы, с которыми поставляется AngularJS, я предлагаю написать директиву атрибута, чтобы упростить шаблоны таким образом (протестировано с Angular 7):

import { Directive, Input, HostBinding } from '@angular/core';

@Directive({ selector: '[shown]' })
export class ShownDirective {
  @Input() public shown: boolean;

  @HostBinding('attr.hidden')
  public get attrHidden(): string | null {
    return this.shown ? null : 'hidden';
  }
}

Многие другие решения верны. Вы должны использовать *ngIfтам, где это возможно. При использовании hiddenатрибута могут применяться непредвиденные стили, но если вы не пишете компоненты для других, вы, вероятно, знаете, так ли это. Таким образом, чтобы эта shownдиректива работала, вы также должны убедиться, что добавили:

[hidden]: {
  display: none !important;
}

к вашим глобальным стилям где-то.

С этим вы можете использовать директиву так:

<div [shown]="myVar">stuff</div>

с симметричной (и противоположной) версией примерно так:

<div [hidden]="myVar">stuff</div>

Чтобы добавить к обязательным - вы также должны использовать префикс, такой как [acmeShown]vs just [shown].

Основная причина, по которой я использовал shownдирективу атрибута, заключается в преобразовании кода AngularJS в Angular -AND-, когда скрытый контент содержит компоненты контейнера, которые вызывают циклические обходы XHR. Причина, по которой я не просто использую, [hidden]="!myVar"состоит в том, что достаточно часто это более сложно, например: [hidden]="!(myVar || yourVar) && anotherVar" - yes I can invert that, but it is more error prone.[показано] `просто легче думать.

Чтобы скрыть и показать div при нажатии кнопки в углу 6.

HTML-код

<button (click)=" isShow=!isShow">FormatCell</button>
<div class="ruleOptionsPanel" *ngIf=" isShow">
<table>
<tr>
<td>Name</td>
<td>Ram</td>
</tr>
</table>
</div>

Компонент .ts Код

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
 isShow=false;
  }

это работает для меня, и это способ заменить ng-hide и ng-show в angular6.

наслаждаться...

Спасибо