Що таке еквівалент ngShow та ngHide у Angular 2+?

У мене є ряд елементів, які я хочу бути видно за певних умов.

В AngularJS я б писав

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

Як я можу це зробити в кутовій 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 помилок новичка, яких слід уникати з кутовим 2

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

Якщо ваш випадок полягає в тому, що стиль відображається жодним, ви можете також використовувати директиву ngStyle та безпосередньо змінювати дисплей, я зробив це для завантажувального завантажувального DropDown.

Тому я створив подію натискання для "вручну" перемикання 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 для справжнього значення).

Ми можемо досягти такої поведінки, використовуючи Anggal 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>

в bootstrap 4.0 клас "d-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

Директива могла б приховати небажаний абзац, встановивши його стиль відображення жодним.

<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] = "'блок" "для заміни ngShow і [style.display] ="' none "" для заміни ngHide.

Найкращий спосіб вирішити цю проблему, використовуючи, ngIf оскільки це добре запобігає виведенню цього елемента в передній частині,

Якщо ви використовуєте [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>

Щоб додати до балів - ви також повинні мати префікс типу so [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.[показано] `просто простіше думати.

Щоб сховати та показати дів на кнопці, натисніть у кутку 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-hid і ng-show у angular6.

насолоджуватися ...

Дякую