Angular 2+ içindeki ngShow ve ngHide eşdeğeri nedir?

Belirli koşullar altında görünür olmasını istediğim bir dizi öğem var.

AngularJS yazarım

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

Bunu Angular 2+ ile nasıl yapabilirim?

Sadece hiddenmülke bağla

[hidden]="!myVar"

Ayrıca bakınız

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

sorunlar

hiddenyine de bazı sorunlar vardır çünkü displaymülk için CSS ile çakışabilir .

Bakın nasıl someyılında Plunker Örneğin bir tarzı vardır çünkü gizli almaz

:host {display: block;}

Ayarlamak. (Bu, diğer tarayıcılarda farklı davranabilir - Chrome 50 ile test ettim)

geçici çözüm

Ekleyerek düzeltebilirsiniz

[hidden] { display: none !important;}

Küresel bir stile index.html.

başka bir tuzak

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

ile aynı

hidden="true"

ve öğeyi göstermez.

hidden="false"dize atar "false"truthy kabul edilir.
Yalnızca değer falseveya özniteliğin kaldırılması öğeyi gerçekten görünür hale getirir.

Kullanmak {{}}ayrıca ifadeyi bir dizeye dönüştürür ve beklendiği gibi çalışmaz.

Bunun yerine atandığı için yalnızca ile bağlanma []beklendiği gibi çalışır .falsefalse"false"

*ngIf vs [hidden]

*ngIfözelliği [hidden]değiştirirken içeriğini DOM'dan etkili bir şekilde kaldırır displayve yalnızca tarayıcıya içeriği göstermemesini söyler, ancak DOM hala içerir.

Şu özelliği kullanın [hidden]:

[hidden]="!myVar"

Veya kullanabilirsiniz *ngIf

*ngIf="myVar"

Bunlar bir öğeyi göstermenin / gizlemenin iki yoludur. Tek fark şudur: *ngIföğeyi DOM'dan kaldırır, [hidden]tarayıcıya öğeyi DOM'da displaytutarak CSS özelliğini kullanarak bir öğeyi göstermesini / gizlemesini söyler .

Kendimi benim durumumdaki elemanın esnek bir kap olduğu farkıyla aynı durumda buluyorum. Eğer durumunuz değilse kolay bir iş olabilir

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

Benim durumumda, desteklediğimiz birçok tarayıcı hala sorunları önlemek için satıcı önekine ihtiyaç duyması nedeniyle başka bir kolay çözüm için gittim

[class.is-loading]="isLoading"

o zaman CSS basit

&.is-loading { display: none } 

görüntülenen durum varsayılan sınıf tarafından işlenir.

Üzgünüm, Açısal 2 kullanırken güvensiz olduğu düşünülen gizli bağlamaya katılmıyorum. Bunun nedeni, gizli stilin, örneğin kullanarak

display: flex;

Önerilen yaklaşım daha güvenli olan * ngIf kullanmaktır. Daha fazla ayrıntı için lütfen resmi Açısal bloga bakın. Açısal 2 ile Kaçınılması Gereken 5 Çaylak Hatası

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

Sizin durumunuz tarzı hiçbiri ise, ngStyle yönergesini de kullanabilir ve doğrudan ekranı değiştirebilirsiniz, bunu bir bootstrap için DropDown üzerindeki UL hiçbiri görüntüleyecek şekilde ayarlanmıştır.

Bu yüzden UL'yi görüntülemek için "manuel" olarak değiştirmek için bir tıklama etkinliği oluşturdum

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

Sonra bileşen her zaman geçiş yapmak showDropDown: bool özniteliği var ve int dayalı, stil için displayDDL aşağıdaki gibi ayarlayın

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

NgShow ve ngHide'ın Açısal 1 belgelerine göre , bu direktiflerin her ikisi de css stilini display: none !important;, bu direktifin durumuna göre öğeye ekler (ngShow için css yanlış değer ekler ve ngHide için css gerçek değer ekler).

Bu davranışı ngClass Açısal 2 yönergesini kullanarak başarabiliriz:

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

Bildirim için bu showAngular2 davranış biz eklemeniz gerekir !ngShowVal önce (değil) ve için hideAngular2 davranış biz yok eklemeniz gerekir !ngHideVal önce (değil).

<div [hidden]="myExpression">

myExpression doğru veya yanlış olarak ayarlanmış olabilir

Bootstrap kullanıyorsanız bu kadar basit:

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

bootstrap 4.0'da "d-none" = "sınıfı görüntülenir: none! important;"

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

Bu meseleye rastlayan herkes için, ben bunu başardım.

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

Kullandım 'visibility'çünkü elementin kapladığı alanı korumak istedim. Bunu yapmak istemediyseniz, sadece 'display'onu kullanabilir ve ayarlayabilirsiniz 'none';

Dinamik olarak veya değil, html öğenize bağlayabilirsiniz.

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

veya

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

Herhangi bir modeli kontrol ile bağlar gibi gizli kullanın ve bunun için css belirtin :

HTML:

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

CSS:

[hidden] {
   display: none;
}

benim için işe yarayan buydu:

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

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

benim için [hidden]=!varhiç çalışmadı.

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

Ve, <div *ngIf="expression">her zaman doğru sonuçları verin.

Açısal belgeler üzerinde iki örnek var https://angular.io/guide/structural-directives#why-remove-rather-than-hide

Bir yönerge, görüntüleme stilini none olarak ayarlayarak istenmeyen paragrafı gizleyebilir.

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

NgShow'u değiştirmek için [style.display] = "'block'" ve ngHide'ı değiştirmek için [style.display] = "'none'" kullanabilirsiniz.

Bu sorunu kullanarak başa çıkmanın en iyi yolu Bu ngIf , öğenin ön uçta oluşturulmasını önlediğinden,

Eğer [hidden]="true"gizleme kullanırsanız veya stil kullanırsanız [style.display], yalnızca ön uçtaki öğeyi gizler ve birisi değeri değiştirebilir ve kolayca görülebilir, Bence öğeyi gizlemenin en iyi yolungIf

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

ve ayrıca birden fazla öğeniz varsa (başka bir uygulama da yapmanız gerekir) Kullan <ng-template>seçeneğini kullanabilirsiniz

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

örnek ng-şablon kodu

AngularJS'nin birlikte geldiği simetrik hidden/ shownyönergeleri kullanmak istiyorsanız , şablonları basitleştirmek için bir öznitelik talimatı yazmanızı öneririm (Açısal 7 ile test edilmiştir):

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

Diğer çözümlerin çoğu doğrudur. Sen gerektiğini kullanmak *ngIfhiç mümkün olduğunca. Kullanılması hiddenniteliğini olabilir beklenmedik stili uygulandı var, ama diğerleri için bileşenler yazmadığınız sürece sorun olduğu takdirde muhtemelen biliyorsunuzdur. Dolayısıyla, bu showndirektifin çalışması için aşağıdakileri eklediğinizden emin olmak istersiniz:

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

bir yerde küresel stillerinize.

Bunlarla direktifi şu şekilde kullanabilirsiniz:

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

simetrik (ve zıt) versiyonla şöyle:

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

Gerekliliklere eklemek için - bize de [acmeShown]sadece vs gibi bir önek olmalıdır [shown].

Bir shownöznitelik yönergesini kullanmamın ana nedeni , gizlenen içerik XHR gidiş-dönüşlerine neden olan kap bileşenleri içerdiğinde AngularJS kodunu Angular -AND- biçimine dönüştürmektir. Sadece kullanmamanın nedeni [hidden]="!myVar", yeterince karmaşık olması gibi: [hidden]="!(myVar || yourVar) && anotherVar" - yes I can invert that, but it is more error prone.[gösterilen] `hakkında düşünmek daha kolaydır.

Div düğmesini gizlemek ve göstermek için açısal olarak tıklayın

HTML Kodu

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

Bileşen .ts Kodu

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

bu benim için işe yarıyor ve ng-hide ve ng-show'un açısal olarak değiştirilmesinin bir yoludur6.

zevk almak...

Teşekkürler