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




angular-material angular2-forms (10)

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

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

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

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

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

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

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

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


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

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

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

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


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

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

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

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

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

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>


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>

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

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

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

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

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


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

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

@Input('myDirective') options: any;

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

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

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

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

    // directive logic
}

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

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

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

अद्यतन करें:

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

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

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


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

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

}

जैसा कि पहले ही उल्लेख किया गया है यह संभव प्रतीत नहीं होता है। एक चीज जो कम से कम कुछ दोहराव को रोकने के लिए इस्तेमाल की जा सकती है वह है 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 माध्यम से दोनों स्थानों पर ngTemplateOutlet


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

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

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