Tương đương với ngShow và ngHide trong Angular 2+ là gì?

Tôi có một số yếu tố mà tôi muốn được hiển thị trong các điều kiện nhất định.

Trong AngularJS tôi sẽ viết

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

Làm thế nào tôi có thể làm điều này trong Angular 2+?

Chỉ cần liên kết với hiddentài sản

[hidden]="!myVar"

Xem thêm

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

vấn đề

hiddencó một số vấn đề mặc dù vì nó có thể xung đột với CSS cho thuộc displaytính.

Xem làm thế nào sometrong ví dụ Plunker không bị ẩn bởi vì nó có kiểu

:host {display: block;}

bộ. (Điều này có thể hoạt động khác trong các trình duyệt khác - Tôi đã thử nghiệm với Chrome 50)

cách giải quyết

Bạn có thể sửa nó bằng cách thêm

[hidden] { display: none !important;}

Để một phong cách toàn cầu trong index.html.

một cạm bẫy khác

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

giống như

hidden="true"

và sẽ không hiển thị các yếu tố.

hidden="false"sẽ gán chuỗi "false"được coi là trung thực.
Chỉ có giá trị falsehoặc loại bỏ thuộc tính sẽ thực sự làm cho phần tử hiển thị.

Việc sử dụng {{}}cũng chuyển đổi biểu thức thành một chuỗi và sẽ không hoạt động như mong đợi.

Chỉ ràng buộc với []sẽ làm việc như mong đợi vì điều này falseđược chỉ định falsethay vì "false".

*ngIf đấu với [hidden]

*ngIfloại bỏ hiệu quả nội dung của nó khỏi DOM trong khi [hidden]sửa đổi thuộc displaytính và chỉ hướng dẫn trình duyệt không hiển thị nội dung nhưng DOM vẫn chứa nội dung đó.

Sử dụng [hidden]thuộc tính:

[hidden]="!myVar"

Hoặc bạn có thể sử dụng *ngIf

*ngIf="myVar"

Đây là hai cách để hiển thị / ẩn một phần tử. Sự khác biệt duy nhất là: *ngIfsẽ xóa phần tử khỏi DOM trong khi [hidden]sẽ yêu cầu trình duyệt hiển thị / ẩn phần tử bằng thuộc displaytính CSS bằng cách giữ phần tử trong DOM.

Tôi thấy mình trong tình huống tương tự với sự khác biệt so với trong trường hợp của tôi, phần tử là một thùng chứa flex. Nếu không phải trường hợp của bạn, một công việc dễ dàng có thể là

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

trong trường hợp của tôi do thực tế là rất nhiều trình duyệt mà chúng tôi hỗ trợ vẫn cần tiền tố của nhà cung cấp để tránh các sự cố tôi đã tìm một giải pháp dễ dàng khác

[class.is-loading]="isLoading"

CSS thì đơn giản như

&.is-loading { display: none } 

để lại sau đó trạng thái hiển thị được xử lý bởi lớp mặc định.

Xin lỗi, tôi phải không đồng ý với ràng buộc với ẩn được coi là không an toàn khi sử dụng Angular 2. Điều này là do kiểu ẩn có thể được ghi đè dễ dàng, ví dụ như sử dụng

display: flex;

Cách tiếp cận được đề xuất là sử dụng * ngNếu an toàn hơn. Để biết thêm chi tiết, xin vui lòng tham khảo blog Angular chính thức. 5 sai lầm của tân binh cần tránh với Angular 2

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

Nếu trường hợp của bạn là kiểu hiển thị, bạn cũng không thể sử dụng lệnh ngStyle và sửa đổi trực tiếp màn hình, tôi đã làm điều đó cho một bootstrap DropDown, UL trên nó được đặt thành không hiển thị.

Vì vậy, tôi đã tạo một sự kiện nhấp để "thủ công" bật tắt UL để hiển thị

<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>    

Sau đó, trên thành phần tôi có thuộc tính showDropDown: bool mà tôi chuyển đổi mọi lúc và dựa trên int, đặt displayDDL cho kiểu như sau

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

Theo tài liệu Angular 1 của ngShow và ngHide , cả hai chỉ thị này đều thêm kiểu cssdisplay: none !important; , vào phần tử theo điều kiện của lệnh đó (đối với ngShow thêm css vào giá trị sai và cho ngHide thêm css cho giá trị thực).

Chúng ta có thể đạt được hành vi này bằng cách sử dụng lệnh 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>

Lưu ý rằng đối với showhành vi trong Angular2, chúng ta cần thêm !(không) trước ngShowVal và đối với hidehành vi trong Angular2, chúng ta không cần thêm !(không) trước ngHideVal.

<div [hidden]="myExpression">

myExpression có thể được đặt thành đúng hoặc sai

Nếu bạn đang sử dụng Bootstrap thì đơn giản như thế này:

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

trong bootstrap 4.0, lớp "d-none" = "display: none! Quan trọng;"

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

Đối với bất kỳ ai khác vấp phải vấn đề này, đây là cách tôi hoàn thành nó.

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');
    }
  }
}

Tôi đã sử dụng 'visibility'vì tôi muốn bảo tồn không gian bị chiếm bởi phần tử. Nếu bạn không muốn làm như vậy, bạn có thể sử dụng 'display'và đặt nó thành 'none';

Bạn có thể liên kết nó với phần tử html của bạn, một cách linh hoạt hoặc không.

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

hoặc là

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

Sử dụng ẩn như bạn liên kết bất kỳ mô hình nào với điều khiển và chỉ định css cho nó:

HTML:

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

CSS:

[hidden] {
   display: none;
}

Đây là những gì làm việc cho tôi:

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

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

đối với tôi, [hidden]=!varchưa bao giờ làm việc

Vì thế, <div *ngIf="expression" style="display:none;">

Và, <div *ngIf="expression">Luôn luôn cho kết quả chính xác.

Có hai ví dụ về các tài liệu Angular https://angular.io/guide/structural-directives#why-remove-rather-than- leather

Một lệnh có thể ẩn đoạn không mong muốn thay vào đó bằng cách đặt kiểu hiển thị của nó thành không.

<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>

Bạn có thể sử dụng [style.display] = "'block'" để thay thế ngShow và [style.display] = "'none'" để thay thế ngHide.

Cách tốt nhất để giải quyết vấn đề này bằng cách sử dụng ngIf Bởi vì điều này cũng ngăn chặn việc phần tử đó hiển thị ở mặt trước,

Nếu bạn sử dụng [hidden]="true"hoặc ẩn kiểu, [style.display]nó sẽ chỉ ẩn phần tử ở mặt trước và ai đó có thể thay đổi giá trị và hiển thị nó dễ dàng, theo tôi cách tốt nhất để ẩn phần tử làngIf

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

và ngoài ra Nếu bạn có nhiều yếu tố (cũng cần phải thực hiện khác), bạn có thể sử dụng <ng-template>tùy chọn

<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>  

mẫu ng-mẫu mã

Nếu bạn chỉ muốn sử dụng các lệnh hidden/ đối xứng shownmà AngularJS đi kèm, tôi khuyên bạn nên viết một chỉ thị thuộc tính để đơn giản hóa các mẫu như vậy (đã thử nghiệm với 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';
  }
}

Nhiều giải pháp khác là chính xác. Bạn nên sử dụng bất cứ *ngIfkhi nào có thể. Sử dụng hiddenthuộc tính có thể có các kiểu không mong muốn được áp dụng, nhưng trừ khi bạn đang viết các thành phần cho người khác, bạn có thể biết nếu có. Vì vậy, để shownchỉ thị này hoạt động, bạn cũng sẽ muốn đảm bảo rằng bạn thêm:

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

phong cách toàn cầu của bạn ở đâu đó.

Với những điều này, bạn có thể sử dụng lệnh như vậy:

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

với phiên bản đối xứng (và ngược lại) như vậy:

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

Để thêm vào các shoulds - yous cũng nên cho chúng ta một tiền tố như vậy [acmeShown]vs chỉ [shown].

Lý do chính tôi đã sử dụng một shownchỉ thị thuộc tính là để chuyển đổi mã AngularJS thành Angular -AND- khi nội dung bị ẩn chứa các thành phần container gây ra các chuyến đi khứ hồi XHR. Lý do tôi không chỉ sử dụng [hidden]="!myVar"là thường đủ phức tạp như: [hidden]="!(myVar || yourVar) && anotherVar" - yes I can invert that, but it is more error prone.[hiển thị] `đơn giản là dễ suy nghĩ hơn.

Để ẩn và hiển thị div trên nút bấm vào góc 6.

Mã HTML

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

Mã thành phần .ts

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

điều này làm việc cho tôi và nó là cách để thay thế ng-hide và ng-show trong angular6.

thưởng thức...

Cảm ơn