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




angular-material angular2-forms (8)

मैं md-raised-button जोड़ने के लिए सामग्री 2 का उपयोग कर रहा हूं।

मैं इस निर्देश को तभी लागू करना चाहता हूं जब कुछ शर्त सही हो जाए।

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

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

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

यहाँ लिंक का लिंक है: https://plnkr.co/edit/oPZ7PyBSf8jjYa2KVh4J?p=preview

मैं वास्तव में किसी भी योगदान की सराहना करूंगा।

अग्रिम में धन्यवाद!


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

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

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

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

संपादित करें

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


आप नीचे दी गई विधि का उपयोग कर सकते हैं:

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

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

अद्यतन करें:

कैसी condition ? '' : null condition ? '' : null मान के रूप में काम करता है:

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

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


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

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

@Input('myDirective') options: any;

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


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

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>


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

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

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


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

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

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

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

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


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

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

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

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

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

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

}




angular-material2