Apa yang setara dengan ngShow dan ngHide di Angular 2+?

Saya memiliki sejumlah elemen yang saya ingin terlihat dalam kondisi tertentu.

Di AngularJS saya akan menulis

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

Bagaimana saya bisa melakukan ini dalam Angular 2+?

Ikat saja ke hiddenproperti

[hidden]="!myVar"

Lihat juga

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

masalah

hiddenmemiliki beberapa masalah karena dapat bertentangan dengan CSS untuk displayproperti.

Lihat bagaimana somedalam contoh Plunker tidak disembunyikan karena memiliki gaya

:host {display: block;}

set. (Ini mungkin berperilaku berbeda di browser lain - saya diuji dengan Chrome 50)

solusi

Anda dapat memperbaikinya dengan menambahkan

[hidden] { display: none !important;}

Untuk gaya global di index.html.

perangkap lain

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

sama dengan

hidden="true"

dan tidak akan menampilkan elemen.

hidden="false"akan menetapkan string "false"yang dianggap benar.
Hanya nilai falseatau menghapus atribut yang benar-benar akan membuat elemen terlihat.

Menggunakan {{}}juga mengubah ekspresi menjadi string dan tidak akan berfungsi seperti yang diharapkan.

Hanya mengikat dengan []akan berfungsi seperti yang diharapkan karena ini falseditugaskan sebagai falseganti "false".

*ngIf vs. [hidden]

*ngIfsecara efektif menghapus kontennya dari DOM sambil [hidden]memodifikasi displayproperti dan hanya menginstruksikan browser untuk tidak menampilkan konten tetapi DOM masih mengandungnya.

Gunakan [hidden]atribut:

[hidden]="!myVar"

Atau bisa Anda gunakan *ngIf

*ngIf="myVar"

Ini adalah dua cara untuk menampilkan / menyembunyikan elemen. Satu-satunya perbedaan adalah: *ngIfakan menghapus elemen dari DOM sementara [hidden]akan memberitahu browser untuk menampilkan / menyembunyikan elemen menggunakan displayproperti CSS dengan menjaga elemen dalam DOM.

Saya menemukan diri saya dalam situasi yang sama dengan perbedaan daripada dalam kasus saya elemennya adalah wadah fleksibel. Jika bukan kasus Anda pekerjaan yang mudah di sekitar bisa

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

dalam kasus saya karena fakta bahwa banyak browser yang kami dukung masih memerlukan awalan vendor untuk menghindari masalah, saya mencari solusi mudah lainnya

[class.is-loading]="isLoading"

dimana CSS itu sederhana

&.is-loading { display: none } 

untuk meninggalkan kemudian negara yang ditampilkan ditangani oleh kelas default.

Maaf, saya harus tidak setuju dengan ikatan ke tersembunyi yang dianggap tidak aman saat menggunakan Angular 2. Ini karena gaya tersembunyi dapat ditimpa dengan mudah misalnya menggunakan

display: flex;

Pendekatan yang disarankan adalah menggunakan * ngIf yang lebih aman. Untuk detail lebih lanjut, silakan merujuk ke blog resmi Angular. 5 Kesalahan Rookie yang Harus Dihindari dengan Angular 2

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

Jika kasus Anda adalah bahwa gaya adalah tampilan tidak ada Anda juga dapat menggunakan arahan ngStyle dan memodifikasi tampilan secara langsung, saya melakukan itu untuk bootstrap DropDown UL pada itu diatur untuk menampilkan tidak ada.

Jadi saya membuat acara klik untuk "secara manual" mengganti UL untuk ditampilkan

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

Kemudian pada komponen saya memiliki showDropDown: atribut bool yang saya toggle setiap kali, dan berdasarkan int, atur displayDDL untuk style sebagai berikut

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

Menurut dokumentasi Angular 1 dari ngShow dan ngHide , kedua arahan ini menambahkan gaya cssdisplay: none !important; , ke elemen sesuai dengan kondisi arahan itu (untuk ngShow menambahkan css pada nilai false, dan untuk ngHide menambahkan css untuk nilai sebenarnya).

Kita dapat mencapai perilaku ini menggunakan Angular 2 directive 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>

Perhatikan bahwa untuk showperilaku di Angular2 kita perlu menambahkan !(tidak) sebelum ngShowVal, dan untuk hideperilaku di Angular2 kita tidak perlu menambahkan !(tidak) sebelum ngHideVal.

<div [hidden]="myExpression">

myExpression dapat disetel ke true atau false

Jika Anda menggunakan Bootstrap semudah ini:

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

di bootstrap 4.0 kelas "d-none" = "display: none! important;"

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

Untuk orang lain yang tersandung masalah ini, ini adalah bagaimana saya menyelesaikannya.

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

Saya menggunakan 'visibility'karena saya ingin melestarikan ruang yang ditempati oleh elemen. Jika Anda tidak ingin melakukannya, Anda bisa menggunakan 'display'dan mengaturnya 'none';

Anda dapat mengikatnya ke elemen html Anda, secara dinamis atau tidak.

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

atau

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

Gunakan tersembunyi seperti Anda mengikat model apa pun dengan kontrol dan tentukan css untuknya:

HTML:

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

CSS:

[hidden] {
   display: none;
}

inilah yang bekerja untuk saya:

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

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

bagi saya, [hidden]=!vartidak pernah berhasil.

Begitu, <div *ngIf="expression" style="display:none;">

Dan, <div *ngIf="expression">Selalu berikan hasil yang benar.

Ada dua contoh pada dokumen Angular https://angular.io/guide/structural-directives#why-remove-rather-than-hide

Arahan bisa menyembunyikan paragraf yang tidak diinginkan dengan mengatur gaya tampilan ke tidak ada.

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

Anda dapat menggunakan [style.display] = "'block'" untuk mengganti ngShow dan [style.display] = "'none'" untuk mengganti ngHide.

Cara terbaik untuk mengatasi masalah ini menggunakan ngIf Karena ini juga mencegah elemen yang ditampilkan di front-end,

Jika Anda menggunakan [hidden]="true"atau menyembunyikan gaya, [style.display]itu hanya akan menyembunyikan elemen di ujung depan dan seseorang dapat mengubah nilainya dan terlihat dengan mudah, Menurut saya cara terbaik untuk menyembunyikan elemen adalahngIf

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

dan juga Jika Anda memiliki beberapa elemen (perlu mengimplementasikan yang lain juga), Anda dapat Menggunakan <ng-template>opsi

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

contoh kode ng-template

Jika Anda hanya ingin menggunakan simetris hiddenshown arahan / yang AngularJS datang, saya sarankan menulis arahan atribut untuk menyederhanakan template seperti itu (diuji dengan 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';
  }
}

Banyak solusi lain yang benar. Anda harus menggunakan *ngIfjika memungkinkan. Menggunakan hiddenatribut can menerapkan gaya tak terduga, tetapi kecuali jika Anda menulis komponen untuk orang lain, Anda mungkin tahu apakah itu. Jadi agar shownarahan ini berfungsi, Anda juga ingin memastikan bahwa Anda menambahkan:

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

untuk gaya global Anda di suatu tempat.

Dengan ini, Anda dapat menggunakan arahan seperti:

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

dengan versi simetris (dan berlawanan) seperti:

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

Untuk menambahkan pada keharusan - Anda juga harus kita awalan seperti begitu [acmeShown]vs hanya[shown] .

Alasan utama saya menggunakan shownarahan atribut adalah untuk mengubah kode AngularJS ke Angular -AND- ketika konten yang disembunyikan berisi komponen kontainer yang menyebabkan perjalanan pulang-pergi XHR. Alasan saya tidak hanya menggunakan [hidden]="!myVar"ini adalah karena sering kali ini lebih rumit seperti: [hidden]="!(myVar || yourVar) && anotherVar" - yes I can invert that, but it is more error prone.[diperlihatkan] `hanya lebih mudah untuk dipikirkan.

Untuk menyembunyikan dan menampilkan div pada tombol klik di sudut 6.

Kode Html

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

Komponen .ts Code

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

ini berfungsi untuk saya dan ini adalah cara untuk mengganti ng-hide dan ng-show di angular6.

Nikmati...

Terima kasih