angular - শর্তসাপেক্ষে একটি নির্দেশিকা প্রয়োগ করুন




angular-material angular2-forms (8)

18 ই জানুয়ারী 2019 তে, আমি এভাবে 5 above বা তারও উপরে কৌণিকভাবে শর্তাধীন নির্দেশিকা যুক্ত করেছি। আমার darkMode উপর ভিত্তি করে <app-nav> উপাদানটির রঙ পরিবর্তন করা darkMode । পৃষ্ঠাটি যদি ডার্ক মোডে থাকত বা না থাকত।

এটি আমার পক্ষে কাজ করেছে:

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

আমি আশা করি এটা কারো সাহায্যে লাগবে.

সম্পাদনা

এটি একটি শর্তের উপর ভিত্তি করে একটি গুণ (রঙ) এর মান পরিবর্তন করে। এটি কেবল ঘটে যায় যে রঙটি কোনও নির্দেশ ব্যবহার করে সংজ্ঞায়িত করা হয়। সুতরাং যে কেউ এটি পড়ছেন দয়া করে বিভ্রান্ত হবেন না, এটি শর্তাধীন কোনও নির্দেশনা প্রয়োগ করছে না (অর্থাত একটি শর্তের ভিত্তিতে ডোমে কোনও নির্দেশ যুক্ত করা বা অপসারণ করা)

আমি md-raised-button যুক্ত করতে মেটেরিয়াল 2 ব্যবহার করছি।

নির্দিষ্ট শর্তটি সত্য হয়ে উঠলে আমি কেবল এই নির্দেশটি প্রয়োগ করতে চাই।

উদাহরণ স্বরূপ:

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

আরেকটি উদাহরণ: আমি প্লাঙ্কারে একটি বেসিক গতিশীল প্রতিক্রিয়াশীল ফর্ম তৈরি করেছি। আমি নিয়ন্ত্রণের formArrayName জন্য formArrayName নির্দেশিকাটি প্রতিক্রিয়াশীল ফর্মের ব্যবহার করছি। আমি যদি নির্দিষ্ট শর্তটি সত্য হয়ে যায় তবেই formArrayName নির্দেশটি প্রয়োগ করতে চাই। অন্যথায় formArrayName নির্দেশিকা যুক্ত করবেন না। আমি অনেক চেষ্টা করেছি এবং গবেষণা করেছি কিন্তু এর কোনও সমাধান পেলাম।

এখানে Plunker লিঙ্ক: https://plnkr.co/edit/oPZ7PyBSf8jjYa2KVh4J?p=preview পূর্বরূপ

আমি সত্যিই কোন অবদান প্রশংসা করব।

আগাম ধন্যবাদ!


অন্যরা যেমন বলেছে, directives গতিশীলভাবে প্রয়োগ করা যায় না।

যাইহোক, আপনি যদি md-button স্টাইলটি ফ্ল্যাট থেকে উত্থাপিত পর্যন্ত টগল করতে চান তবে এটি

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

কৌতুক করবে। Plunker


আপনি নীচের পদ্ধতিটি ব্যবহার করতে পারেন:

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

আপনার প্লঙ্কার: fork একই প্রয়োগ করা হয়েছে

হালনাগাদ:

কেমন condition ? '' : null condition ? '' : null মান হিসাবে কাজ করে:

এটির খালি স্ট্রিং ( '' ) এ এটির থেকে attr.md-raised-button="" , যখন এর attr.md-raised-button="" সাথে অ্যাট্রিবিটির অস্তিত্ব থাকবে না।

আপডেট: প্লঙ্কার আপডেট: fork (সংস্করণ সংক্রান্ত সমস্যাগুলি স্থির হয়েছে, দয়া করে নোট করুন প্রশ্নটি মূলত কৌণিক 4 এর উপর ভিত্তি করে ছিল)


আমি একটি দুর্দান্ত বিদ্যমান সমাধান খুঁজে পেলাম না, তাই আমি আমার নিজস্ব নির্দেশিকা তৈরি করেছি যা এটি করে।

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

তারপরে আপনার এইচটিএমএল:

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


ইতিমধ্যে উল্লিখিত হিসাবে এটি সম্ভব বলে মনে হচ্ছে না। একটি জিনিস যা অন্তত কিছু সদৃশ রোধ করতে ব্যবহৃত হতে পারে তা হ'ল ng-template । এটি আপনাকে ngIf দ্বারা প্রভাবিত উপাদানটির সামগ্রী বের করতে সহায়তা করে।

যদি আপনি উদাহরণস্বরূপ কৌণিক উপাদান ব্যবহার করে একটি শ্রেণিবিন্যাস মেনু উপাদান তৈরি করতে চান:

@Input('myDirective') options: any;

এখানে শর্তাধীন প্রয়োগিত নির্দেশটি হ'ল matMenuTriggerFor , যা কেবলমাত্র বাচ্চাদের সাথে মেনু আইটেমগুলিতে প্রয়োগ করা উচিত। বোতামের বিষয়বস্তুগুলি ngTemplateOutlet মাধ্যমে উভয় স্থানে ngTemplateOutlet


এটি দেরিতে আসতে পারে তবে শর্তাধীনভাবে নির্দেশিকা প্রয়োগের জন্য এটি একটি কার্যকর এবং মার্জিত পদ্ধতি।

নির্দেশিকা শ্রেণিতে ইনপুট ভেরিয়েবল তৈরি করুন:

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

নির্দেশটি প্রয়োগ করার সময়, ইনপুট ভেরিয়েবলের প্রয়োগ সম্পত্তি সেট করুন:

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

    // directive logic
}

এই পদ্ধতির পরিবর্তনশীলগুলির জন্য নির্দেশের পদ্ধতিটি পরীক্ষা করুন app প্রয়োগ করুন এবং শর্তের ভিত্তিতে নির্দেশিক যুক্তি প্রয়োগ করুন:

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

বর্তমানে শর্তসাপেক্ষে কোনও উপাদানটিতে কোনও নির্দেশিকা প্রয়োগের NO উপায় NO his এটি সমর্থিত নয় you আপনি যে উপাদানগুলি তৈরি করেছেন তা শর্তাধীনভাবে যুক্ত বা সরানো যেতে পারে।

ইতিমধ্যে angular2 দিয়ে একই জন্য একটি সমস্যা তৈরি হয়েছে, সুতরাং এটি angular2 হওয়া উচিত।

বিকল্পভাবে আপনি এনজি-ইফ দিয়ে বিকল্পটিতে যেতে পারেন

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

হ্যা এটা সম্ভব.

অ্যাপ্লিকেশনহোভার নির্দেশের সাথে এইচটিএমএল পৃষ্ঠা :)

  <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