angular - AngShow 2 में ngShow और ngHide के बराबर क्या है?




angular-components angular-template (10)

किसी और को इस मुद्दे पर ठोकर खाने के लिए, मैंने इसे पूरा किया।

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>

मेरे पास कई तत्व हैं जो मैं कुछ शर्तों के तहत दिखाई देना चाहता हूं।

AngularJS में मैं लिखूंगा

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

मैं इसे एंगुलर 2+ में कैसे कर सकता हूं?


कोणीय दस्तावेजों पर दो उदाहरण हैं 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>

आप ngHhow को बदलने के लिए [style.display] = "'block'" और ngHide को बदलने के लिए [style.display] = "'none'" का उपयोग कर सकते हैं।


बस hidden संपत्ति को बांधें

[hidden]="!myVar"

यह सभी देखें

मुद्दे

hidden में कुछ समस्याएं हैं, क्योंकि यह display संपत्ति के लिए सीएसएस के साथ संघर्ष कर सकता है।

देखें कि कैसे प्लंकेर उदाहरण में some छिपा नहीं है क्योंकि इसमें एक शैली है

: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 में अभी भी यह शामिल है।


बूटस्ट्रैप 4.0 में वर्ग "d-none" = "प्रदर्शन: कोई नहीं? महत्वपूर्ण?"

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

मैं अपने मामले में अंतर के साथ एक ही स्थिति में खुद को पाता हूं, तत्व एक फ्लेक्स कंटेनर था। अगर आपका मामला आसान काम नहीं है, तो हो सकता है

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

मेरे मामले में इस तथ्य के कारण कि बहुत सारे ब्राउज़र जो हम समर्थन करते हैं, मुझे अभी भी एक और आसान समाधान के लिए गए समस्याओं से बचने के लिए विक्रेता उपसर्ग की आवश्यकता है

[class.is-loading]="isLoading"

जहां तब सीएसएस सरल है

&.is-loading { display: none } 

तब छोड़ना जब डिफॉल्ट क्लास द्वारा हैंडल किया गया डिस्प्ले स्टेट।


यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं तो यह उतना ही सरल है:

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

ngShow और ngHide कोणीय 1 प्रलेखन के अनुसार, ये दोनों निर्देश सीएसएस शैली display: none !important; जोड़ते हैं display: none !important; , उस निर्देश की स्थिति के अनुसार तत्व के लिए (ngShow के लिए झूठे मूल्य पर सीएसएस जोड़ता है, और एनजीहाइड के लिए सही मूल्य के लिए सीएसएस जोड़ता है)।

हम इस व्यवहार को कोणीय 2 के निर्देशक ngClass का उपयोग करके प्राप्त कर सकते हैं:

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

ध्यान दें कि Angular2 में व्यवहार show लिए हमें जोड़ना होगा ! ngShowVal से पहले (नहीं), और Angular2 में hide व्यवहार के लिए हमें जोड़ने की आवश्यकता नहीं है ! (नहीं) ngHideVal से पहले।


[hidden] विशेषता का उपयोग करें:

[hidden]="!myVar"

या आप *ngIf उपयोग कर सकते हैं

*ngIf="myVar"

किसी तत्व को दिखाने / छिपाने के ये दो तरीके हैं। एकमात्र अंतर यह है: *ngIf तत्व को DOM से हटा देगा जबकि [hidden] ब्राउज़र को बताएगा कि वह तत्व को DOM में दिखा कर CSS display संपत्ति का उपयोग करके एक तत्व को दिखा / छिपा सकता है।


बटन को छिपाने और दिखाने के लिए कोणीय 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;
  }

यह मेरे लिए काम करता है और यह एनजी-छिपाने और एनजी-शो को कोणीय 6 में बदलने का तरीका है।

का आनंद लें...

धन्यवाद


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




angular-template