सशर्त रूप से एक निर्देश लागू करें

Question

मैं जोड़ने के लिए सामग्री 2 का उपयोग कर रहा हूं md-raised-button। मैं इस निर्देश को तभी लागू करना चाहता हूं जब कुछ शर्त सही हो जाए।

उदाहरण के लिए:

<button md-raised-button="true"></button>

एक और उदाहरण: मैंने प्लंकर में एक बुनियादी गतिशील प्रतिक्रियाशील रूप बनाया। मैं formArrayNameनियंत्रण के सरणी के लिए प्रतिक्रियाशील रूप के निर्देशन का उपयोग कर रहा हूं । मैं formArrayNameकेवल तभी निर्देश लागू करना चाहता हूं जब विशिष्ट स्थिति सत्य हो जाए, अन्यथा formArrayNameनिर्देश न जोड़ें ।

यहाँ एक प्लंकर लिंक है ।

Comments

हाँ

— md-

जिन शर्तों पर निर्देशों का उपयोग किया जाता है उन्हें लागू करना संभवतः एओटी को बेकार कर देगा क्योंकि जब तक ऐप नहीं चल रहा था तब तक आप टेम्पलेट संकलित नहीं कर पाएंगे।

— रिएक्टगुलर

Answer 1

मुझे नहीं पता कि आप किसी शर्त के आधार पर निर्देश लागू कर सकते हैं, लेकिन वर्कअराउंड में 2 बटन होंगे और उन्हें एक शर्त के आधार पर प्रदर्शित किया जाएगा ।

<button *ngIf="!condition"></button>
<button *ngIf="condition" md-raised-button></button> 

संपादित करें: शायद यह मददगार होगा।

Comments

आपकी प्रतिक्रिया के लिए धन्यवाद। लेकिन मैंने पहले से ही इस तकनीक का उपयोग प्लंकर उदाहरण में किया है जिसे मैंने प्रश्न विस्तार से जोड़ा है। यह अच्छा विकल्प है लेकिन अच्छा नहीं है अगर कोड जटिल है। क्योंकि यह तकनीक पुन: उपयोग की अवधारणा को बर्बाद कर देती है। आप मेरे उदाहरण को प्लंकर में देख सकते हैं और देख सकते हैं कि इस दृष्टिकोण के कारण मेरा कोड कैसे डुप्लिकेट है। यही कारण है कि मैं इस तकनीक का उपयोग नहीं करना चाहता। मैं कुछ बेहतर समाधान चाहता हूं ताकि मैं गतिशील तत्वों को उत्पन्न कर सकूं।

— user2899728

समझा। आप उस कोड को लपेट सकते हैं जो घटक में डुप्लिकेट है।

— LLL

यह अच्छा विचार है लेकिन दुर्भाग्य से यह प्रतिक्रियाशील रूपों के मामले में काम नहीं करता है। प्रतिक्रियाशील रूपों के साथ, एक और मुद्दा दिखाई देता है। यदि मैं अलग घटक में इनपुट डालता हूं, तो कोणीय के लिए मुझे उस बाल घटक के भीतर [formGroup] = "फ़ॉर्म" जोड़ना होगा। लेकिन अगर मैं ऐसा करता हूं तो मेरी एरी बाइंडिंग काम नहीं करेगी।

— user2899728

यह एक बहुत समाधान है क्योंकि यह कोड डुप्लिकेट है। कल्पना कीजिए कि यह सिर्फ बटन नहीं है, बल्कि इसके अंदर बहुत सारे html कोड के साथ एक div है।

— शचर हर-शुव

Answer 2

यदि आपको सीएसएस नियमों को ट्रिगर करने के लिए केवल एक विशेषता जोड़ने की आवश्यकता है, तो आप नीचे दी गई विधि का उपयोग कर सकते हैं: (यह गतिशील रूप से निर्देश बनाने / नष्ट नहीं करता है)

<button [attr.md-raised-button]="condition ? '' : null"></button>

अपने प्लंकर के लिए एक ही लागू: कांटा

अपडेट करें:

condition ? '' : nullमूल्य के रूप में कैसे काम करता है:

जब इसकी खाली स्ट्रिंग ( '') बन जाती है attr.md-raised-button="", जब इसकी nullविशेषता मौजूद नहीं होगी।

अपडेट: प्लंकर अपडेट: कांटा (संस्करण के मुद्दे तय हो गए हैं, कृपया ध्यान दें कि प्रश्न मूल रूप से कोणीय 4 पर आधारित था)

Comments

@ ल्यूक हाँ, यदि आप "(अब)" से मतलब रखते हैं : जैसे कि 2017-01-06 से जो प्रश्न पूछे जाने से 5 महीने पहले था। देख कोणीय बदलाव का 6 मद

— Aldracor

@ एल्ड्राकोर कोणीय 5.2.1, काम नहीं करता है। और मुझे समझ में नहीं आता है कि इसे "स्थिति" क्यों दिखना चाहिए? '': अशक्त '' जहां दोनों परिणाम मूल रूप से झूठे हैं। '' के बजाय क्या होना चाहिए? 'सच' भी काम नहीं करता है।

— आर्सेनी फोमिन

इसलिए जो कोई भी काम करने के लिए अपने निर्देश के लिए html तत्व नहीं बनाना चाहता है और एनजी-कंटेनर का उपयोग कर रहा है, मैं बस एक [सक्षम] = "बूलियनवर" में पास होने के साथ गया

— बेन टालियाडोरोस

कोणीय 6 में मेरे लिए काम नहीं कर रहा है। प्लंकर के नमूने में लोडिंग स्क्रीन नहीं है। मेरे पढ़ने के आधार पर, यह दृष्टिकोण HTML विशेषताओं के लिए काम कर सकता है, लेकिन कोणीय निर्देशों के लिए काम नहीं करेगा। मूल प्रश्न एनजी सामग्री पुस्तकालय से कोणीय निर्देशों के बारे में था।

— जेफ्रीहॉशर

@kbpontius टिप्पणी के लिए धन्यवाद, यह Html विशेषताओं पर काम करता है, लेकिन कोणीय निर्देशों पर नहीं (विशेषता के रूप में)

— Reza

Answer 3

जैसा कि पहले ही उल्लेख किया गया है यह संभव प्रतीत नहीं होता है। एक चीज जो कम से कम कुछ नकल रोकने के लिए इस्तेमाल की जा सकती है ng-template। यह आपको ngIfब्रांचिंग से प्रभावित तत्व की सामग्री को निकालने की अनुमति देता है ।

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

<!-- Button contents -->
<ng-template #contentTemplate>
    <mat-icon *ngIf="item.icon != null">{{ item.icon }}</mat-icon>
    {{ item.label }}
</ng-template>

<!-- Leaf button -->
<button *ngIf="item.children == null" mat-menu-item
    (click)="executeCommand()"
    [disabled]="enabled == false">
    <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
</button>
<!-- Node button -->
<ng-container *ngIf="item.children != null">
    <button mat-menu-item
        [matMenuTriggerFor]="subMenu">
        <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
    </button>

    <mat-menu #subMenu="matMenu">
        <menu-item *ngFor="let child of item.children" [item]="child"></menu-item>
    </mat-menu>
</ng-container>

यहां सशर्त रूप से लागू निर्देश है matMenuTriggerFor, जिसे केवल बच्चों के साथ मेनू आइटम पर लागू किया जाना चाहिए। बटन की सामग्री को दोनों स्थानों के माध्यम से डाला जाता है ngTemplateOutlet।

Comments

यह एकमात्र उत्तर है जो चलो एक निदेशक को सशर्त निर्देशों के साथ-साथ कोड पुन: प्रयोज्य का उपयोग करने के लिए देता है।

— रविंदर पायल

Answer 4

यह देर से आ सकता है, लेकिन यह सशर्त रूप से एक निर्देश लागू करने के लिए एक व्यवहार्य और सुरुचिपूर्ण तरीका है।

निर्देश वर्ग में इनपुट चर बनाएं:

@Input('myDirective') options: any;

निर्देश लागू करते समय, इनपुट चर की लागू संपत्ति सेट करें:

<div [myDirective] = {apply: someCondition}></div>

चर के लिए निर्देश की जाँच की विधि में इस.पुन.समर्थन और शर्त के आधार पर निर्देश तर्क लागू करें:

ngAfterViewInit(): void {
    if (!this.options.apply) {
        return;
    }

    // directive logic
}

Comments

यह मेरे लिए काम नहीं करता है, क्योंकि निर्देश अभी भी घटक में मौजूद है, यह सिर्फ कोई तर्क नहीं करता है। मैं निर्देश के अस्तित्व को सशर्त रूप से लागू करना चाहूंगा, विशेष रूप से क्योंकि वहाँ सीएसएस है जो इस निर्देश के लिए जांच करता है।

— रण लोटेम

आपके पास एक अलग समस्या है, यहां सूचीबद्ध एक से (निर्देश सशर्त लागू करें)। अपना मुद्दा पोस्ट करें और लोग आपकी मदद करेंगे। पहले विचार के रूप में, आप निर्देश को एक div पर रख सकते हैं और अपनी स्थिति को लागू करने के लिए इसके चारों ओर * ngIf के साथ एक ng-container रख सकते हैं। ngIf DOM से div नोड हटाता है, इसलिए यह काम कर सकता है। मैं सिर्फ अनुमान लगा रहा हूं, आपको अपनी मदद के लिए पीपीएल के लिए कोड नमूने / विवरण के साथ अपनी समस्या को पोस्ट करने की आवश्यकता है।

— टिहा

यह एक अच्छा उपाय नहीं है। निर्देश अभी भी प्रारंभिक है।

— डिनो

Answer 5

जैसा कि दूसरों ने भी कहा है, directivesगतिशील रूप से लागू नहीं किया जा सकता है।

हालाँकि, यदि आप फ्लैट से उठाई गईmd-button शैली को टॉगल करना चाहते हैं , तो यह

<button md-button [class.mat-raised-button]="isRaised">Toggle Raised Button</button>

चालबाजी करेगा। Plunker

Answer 6

यह एक समाधान भी हो सकता है:

[md-raised-button]="condition ? 'true' : ''"

---

यह कोणीय 4, आयनिक 3 के लिए इस तरह काम कर रहा है:

[color]="condition ? 'primary' : ''"conditionएक फ़ंक्शन कहां है जो यह तय करता है कि यह एक सक्रिय पृष्ठ है या नहीं। पूरा कोड इस तरह दिखता है:

<button *ngFor="let page of ..." [color]="isActivePage(page) ? 'primary' : ''">{{ page.title }}</button>

Answer 7

वर्तमान में, NOघटक को सशर्त रूप से लागू करने का एक तरीका है। यह समर्थित नहीं है। आपके द्वारा बनाए गए घटकों को जोड़ा या हटाया जा सकता है।

उसी के लिए पहले से ही एक मुद्दा बना हुआ है angular2, इसलिए इसे angular4 aswell के साथ ही होना चाहिए।

वैकल्पिक रूप से आप एनजी-इफ के साथ विकल्प के लिए जा सकते हैं

<button ngIf="!condition"></button>
<button ngIf="condition" md-raised-button></button> 

Comments

पहले से ही LLL के उत्तर में शामिल हैं

— सुमित रामटेके

Answer 8

मुझे एक अच्छा मौजूदा समाधान नहीं मिला, इसलिए मैंने अपना खुद का निर्देश बनाया जो ऐसा करता है।

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[dynamic-attr]'
})
export class DynamicAttrDirective {
  @Input('dynamic-attr') attr: string;
  private _el: ElementRef;

  constructor(el: ElementRef) {
    this._el = el;
  }

  ngOnInit() {
    if (this.attr === '') return null;
    const node = document.createAttribute(this.attr);
    this._el.nativeElement.setAttributeNode(node);
  }
}

फिर आपका html:

<div dynamic-attr="{{hasMargin: 'margin-left' ? ''}}"></div>

Comments

आप केवल @HostBinding('attr.dynamic-attr') @Input('dynamic-attr') attr: string;ngOnInit + ElementRef के बजाय उपयोग कर सकते हैं ।

— pinguinjkeke

यह उस सवाल का जवाब नहीं है जो एक निर्देश को गतिशील रूप से जोड़ना था , एक विशेषता नहीं।

— क्रिस हैन्स

Answer 9

शायद यह किसी की मदद करेगा।

नीचे दिए गए उदाहरण में मेरे पास है my-button.component.htmlऔर मैं केवल *appHasPermissionनिर्देश को लागू करना चाहता हूं <button>यदि roleविशेषता सेट है।

<ng-container *ngIf="role; else buttonNoRole" >
  <ng-container *appHasPermission="role">
    <!-- button with *appHasPermission -->
    <ng-template *ngTemplateOutlet="buttonNoRole;"></ng-template>
  </ng-container>
</ng-container>

<ng-template #buttonNoRole>
  <!-- button without *appHasPermission -->
  <button
    mat-raised-button type="button"
    [color]="color"
    [disabled]="disabled"
    [(appClickProgress)]="onClick"
    [key]="progressKey">
    <mat-icon *ngIf="icon">{{ icon }}</mat-icon> {{ label }}
  </button>
</ng-template>

इस तरह आप <button>कोड की नकल नहीं करते हैं ।

Answer 10

हाँ यह संभव है।

html पृष्ठ appActiveAhover निर्देश के साथ :)

  <li routerLinkActive="active" #link1="routerLinkActive">
        <a [appActiveAhover]='link1.isActive?false:true' routerLink="administration" [ngStyle]="{'background':link1.isActive?domaindata.get_color3():none}">
          <i class="fa fa-users fa-lg" aria-hidden="true"></i> Administration</a>
      </li>
      <li  routerLinkActive="active" #link2="routerLinkActive">
        <a [appActiveAhover]='link2.isActive?false:true' routerLink="verkaufsburo" [ngStyle]="{'background':link2.isActive?domaindata.get_color3():none,'color':link2.isActive?color2:none}">
          <i class="fa fa-truck fa-lg" aria-hidden="true"></i> Verkaufsbüro</a>
      </li>
      <li  routerLinkActive="active" #link3="routerLinkActive">
        <a [appActiveAhover]='link3.isActive?false:true' routerLink="preisrechner" [ngStyle]="{'background':link3.isActive?domaindata.get_color3():none}">
          <i class="fa fa-calculator fa-lg" aria-hidden="true" *ngIf="routerLinkActive"></i> Preisrechner</a>
      </li>

आदेश

@Directive({
  selector: '[appActiveAhover]'
})
export class ActiveAhoverDirective implements OnInit {
  @Input() appActiveAhover:boolean;
  constructor(public el: ElementRef, public renderer: Renderer, public domaindata: DomainnameDataService) {
}

  ngOnInit() {
  }

  @HostListener('mouseover') onMouseOver() {
    if(this.appActiveAhover){
      this.renderer.setElementStyle(this.el.nativeElement, 'color', this.domaindata.domaindata.color2);
    }
  }

  @HostListener('mouseout') onMouseOut() {
    if(this.appActiveAhover){
      this.renderer.setElementStyle(this.el.nativeElement, 'color', 'white');
    }
  }

}

Comments

एक साइड नोट के रूप में, रेंडरर पदावनत किया जाता है, इसके बजाय

— Renderer2 का

Answer 11

nullनिर्देशन में पास होने से यह दूर हो जाता है!

<button md-raised-button="condition ? true : null"></button>

Answer 12

उपयोग NgClass

[ngClass]="{ 'mat-raised-button': trueCondition }"

वास्तविक स्थिति का उदाहरण:

this.element === 'Today'

या बूलियन फ़ंक्शन

getTruth()

पूरा उदाहरण:

  <button [ngClass]="{ 'mat-raised-button': trueCondition }">TEXT</button>

यदि आप एक डिफ़ॉल्ट वर्ग चाहते हैं:

  <button [ngClass]="{ 'mat-raised-button': trueCondition, 'default-class': !trueCondition }">TEXT</button>

Comments

यह मैंने पूछा नहीं है। आप कक्षा के लिए उदाहरण दिखा रहे हैं। मैं विशेषता-निर्देश के बारे में बात कर रहा हूँ।

— user2899728

@ user2899728 दुर्भाग्य से ऐसा करने का कोई और तरीका नहीं है। (आप md-raised-buttonविशेषता को असत्य के रूप में सेट नहीं कर सकते हैं )

— एड्रिक

@ user2899728 सशर्त रूप से निर्देशों को लागू करने का कोई तरीका नहीं है। मैंने आपको एक अलग दृष्टिकोण ("मतलब") के साथ जो आप (अंतिम परिणाम) की तलाश कर रहा था, उसे देने का प्रयास किया है।

— मोशे

जब आप एक रचनात्मक विकल्प प्रदान करते हैं, तो आमतौर पर यह बताने के लिए कि आप अपने उत्तर के साथ कहाँ जा रहे हैं, यह बताने के लिए पहले टिप्पणियों की एक पंक्ति में रखने में मदद करता है।

— bvdb

@bvdb अपनी तरह के शब्दों के लिए धन्यवाद। मैं दिशा के बिना लिख ​​रहा था, और यह एक गलती थी। भविष्य में, मुझे इस पोस्ट को संपादित करने की उम्मीद है, क्योंकि यह एक व्यक्ति को भी मदद कर सकता है।

— मोशे

Answer 13

मुझे एक और विचार आया कि आप क्या कर सकते हैं।

आप html को स्टोर कर सकते हैं जिसे आप एक स्ट्रिंग में एक स्ट्रिंग के रूप में प्रतिस्थापित करना चाहते हैं और फिर DOMSanitizer की bypassSecurityTrustHtmlविधि का उपयोग करके अपनी इच्छानुसार इसमें से निर्देश जोड़ / हटा सकते हैं ।

मेरे पास एक साफ समाधान नहीं है, लेकिन कम से कम आपको कोड दोहराने की आवश्यकता नहीं है।

Answer 14

18 जनवरी 2019 तक, यह है कि मैंने कोणीय 5 और इसके बाद के संस्करण में सशर्त रूप से एक निर्देश जोड़ा। मुझे इसके <app-nav>आधार पर घटक का रंग बदलने की आवश्यकता थी darkMode। अगर पेज डार्क मोड में था या नहीं।

यह मेरे लिए काम किया:

<app-nav [color]="darkMode ? 'orange':'green'"></app-nav>

मुझे उम्मीद है इससे किसी को सहायता मिलेगी।

संपादित करें

यह एक शर्त के आधार पर एक विशेषता (रंग) के मूल्य को बदलता है। यह सिर्फ ऐसा होता है कि रंग एक निर्देश का उपयोग करके परिभाषित किया गया है। तो इसे पढ़ने वाला कोई भी भ्रमित न हो, यह सशर्त रूप से लागू नहीं होता है (यानी जिसका अर्थ है शर्त के आधार पर डोम में निर्देश जोड़ना या हटाना)

Comments

आप दोनों मामलों में निर्देश को अलग-अलग विकल्पों (यानी, नारंगी या हरे) के साथ लागू करते हैं। प्रश्न एक शर्त के आधार पर निर्देश की अनदेखी करने के लिए कहता है।

— मोजतबा