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

Question

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

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

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

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

এখানে একটি plunker লিঙ্ক ।

Comments

হ্যাঁ MD-উত্থাপিত বোতাম এটা অ্যাট্রিবিউট নির্দেশিকা (হয় material.angular.io/components/component/button )

— user2899728

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

— ই

Answer 1

যদি আপনি একটি শর্ত উপর ভিত্তি করে নির্দেশনা আবেদন করতে পারেন আমি জানি না, কিন্তু একটি কার্যসংক্রান্ত থাকার হবে 2 বোতাম এবং তাদের একটি শর্ত উপর ভিত্তি করে প্রদর্শন ।

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

সম্পাদনা: হয়তো এই সহায়ক হবে।

Comments

আপনার প্রতিক্রিয়ার জন্য আপনাকে ধন্যবাদ. তবে ইতিমধ্যে আমি এই কৌশলটি প্লঙ্কার উদাহরণে ব্যবহার করেছি যা আমি প্রশ্নের বিশদে যুক্ত করেছি। কোডটি জটিল হলে এটি ভাল বিকল্প তবে ধারণাটি ভাল নয়। কারণ এই কৌশলটি পুনরায় ব্যবহারের ধারণাটি নষ্ট করে দেয়। আপনি আমার উদাহরণটি নিমজ্জনকারীতে দেখতে পাবেন এবং এই পদ্ধতির কারণে আমার কোডটি কীভাবে নকল করা হয়েছে তা লক্ষ্য করতে পারেন। এজন্য আমি এই কৌশলটি ব্যবহার করতে চাই না। আমি আরও কিছু ভাল সমাধান চাই যাতে আমি গতিশীল উপাদানগুলি তৈরি করতে পারি।

— ব্যবহারকারী 2899728

আমি দেখি. আপনি উপাদানটি নকল করা কোড মোড়ানো করতে পারে।

— এলএলএল

এটি ভাল ধারণা তবে দুর্ভাগ্যক্রমে প্রতিক্রিয়াশীল ফর্মগুলির ক্ষেত্রে এটি কাজ করে না। প্রতিক্রিয়াশীল ফর্মগুলির সাথে, অন্য একটি সমস্যা উপস্থিত হয়। যদি আমি পৃথক উপাদানগুলিতে ইনপুট রাখি, তবে কৌণিকর জন্য আমাকে সেই সন্তানের উপাদানগুলির মধ্যে [formGroup] = "ফর্ম" যুক্ত করতে হবে। তবে আমি যদি তা করি তবে আমার অ্যারে বাইন্ডিং কাজ করবে না।

— ব্যবহারকারী 2899728

কোডটি সদৃশ হওয়ার কারণে এটি একটি মারাত্মক সমাধান। কল্পনা করুন যে এটি কেবল বোতাম নয় এটির ভিতরে অনেকগুলি এইচটিএমএল কোড সহ একটি ডিভ।

— শচর হর-শুভ

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, কাজ করে না। এবং কেন ঘটনাটি "শর্ত?" ": নাল" এর মতো দেখতে হবে তা আমি বুঝতে পারি না যেখানে উভয় ফলাফলই মূলত মিথ্যা false '' এর পরিবর্তে কী হওয়া উচিত? 'সত্য' কাজ করে না।

— আরসেনিই ফমিন

সুতরাং যে কেউ কাজ করার নির্দেশের জন্য এইচটিএমএল উপাদান তৈরি করতে চায় না এবং এনজি-কনটেইনার ব্যবহার করে, আমি কেবল একটি [সক্ষম] = "বুলিয়ানভার" দিয়ে যাচ্ছি

— বেন টালিডোরোস

কৌণিক in. এ আমার জন্য কাজ করছেন না The আমার পড়ার উপর ভিত্তি করে, এই পদ্ধতির HTML টি বৈশিষ্ট্যের জন্য কাজ করতে পারে তবে কৌনিক নির্দেশের জন্য কাজ করবে না। মূল প্রশ্নটি ছিল এনজি মেটাল লাইব্রেরির অ্যাংুলার ডাইরেক্টিভ সম্পর্কে।

— জেফরিহাউসার

@ কেবিপোনটিয়াস মন্তব্যের জন্য ধন্যবাদ, এটি এইচটিএমএল বৈশিষ্ট্যগুলিতে কাজ করে তবে কৌনিক নির্দেশিকায় নয় (গুণ হিসাবে)

— রেজা

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, যা কেবলমাত্র বাচ্চাদের সাথে মেনু আইটেমগুলিতে প্রয়োগ করা উচিত। বোতামের সামগ্রীগুলি উভয় স্থানে placesোকানো হয় ngTemplateOutlet।

Comments

এটিই একমাত্র উত্তর যা কোনও বিকাশকারীকে শর্তসাপেক্ষ নির্দেশাবলী এবং কোড পুনরায় ব্যবহারযোগ্যতার ব্যবহার করতে দেওয়া উচিত।

— রবীন্দ্র পায়েল

Answer 4

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

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

@Input('myDirective') options: any;

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

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

নির্দেশের পদ্ধতিতে এই চলকের জন্য নির্দেশ পরীক্ষা করুন app প্রয়োগ করুন ly

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

    // directive logic
}

Comments

এটি আমার পক্ষে কাজ করে না, কারণ নির্দেশিকাটি উপাদানটিতে এখনও রয়েছে, এটি কেবল কোনও যুক্তি সম্পাদন করে না। আমি নির্দেশকের অস্তিত্ব শর্তসাপেক্ষে প্রয়োগ করতে চাই বিশেষত কারণ সিএসএস রয়েছে যা এই নির্দেশনার জন্য পরীক্ষা করে।

— রান লটটম

এখানে তালিকাভুক্ত একের চেয়ে আপনার আলাদা সমস্যা আছে (শর্তসাপেক্ষে নির্দেশটি প্রয়োগ করুন)। আপনার সমস্যা পোস্ট করুন এবং লোকেরা আপনাকে সহায়তা করবে। প্রথম ধারণা হিসাবে, আপনি একটি ডিভের উপর নির্দেশিকা রাখতে পারেন এবং আপনার শর্তটি প্রয়োগ করার জন্য একটি এনজি-ধারকটিকে একটি * এনজিআই দিয়ে লাগাতে পারেন। এনজিআইফ যদি ডিওএম থেকে ডিভ নোড সরিয়ে দেয় তবে এটি কার্যকর হতে পারে। আমি কেবল অনুমান করছি, আপনাকে পিপিএল সাহায্যের জন্য কোডের নমুনা / বিবরণ দিয়ে আপনার সমস্যা পোস্ট করতে হবে।

— তিহা

এটি কোনও ভাল সমাধান নয়। দিকনির্দেশক এখনও এর আরম্ভ হয়।

— দিনো

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শর্তসাপেক্ষে কোনও উপাদানটিতে একটি নির্দেশিকা প্রয়োগের উপায় রয়েছে his এটি সমর্থিত নয় you আপনি যে উপাদানগুলি তৈরি করেছেন তা শর্তাধীনভাবে যুক্ত বা সরানো যেতে পারে।

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

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

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

Comments

ইতিমধ্যে এলএলএল এর উত্তরে

— coveredাকা আছে

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

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

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

Comments

আপনি @HostBinding('attr.dynamic-attr') @Input('dynamic-attr') attr: string;এনজিওএনট + এলিমেন্টরিফের পরিবর্তে কেবলমাত্র একটি ব্যবহার করতে পারেন ।

— pinguinjkeke

এটি কোনও প্রশ্নের জন্য কীভাবে গতিশীল দিকনির্দেশনা যোগ করবেন , কোনও গুণাবলীর উত্তর নয় an

— ক্রিস হেইনেস

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

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

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

  <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

পার্শ্ব দ্রষ্টব্য হিসাবে, রেন্ডারারকে

— হ্রাস

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

এটি আমি যা চেয়েছিলাম তা নয়। আপনি শ্রেণীর জন্য উদাহরণ দেখাচ্ছে। আমি অ্যাট্রিবিউট-ডাইরেক্টিভের কথা বলছি।

— ব্যবহারকারী 2899728

@ user2899728 দুর্ভাগ্যক্রমে এটি করার উপায় নেই। (আপনি md-raised-buttonঅ্যাট্রিবিউটটি মিথ্যা হিসাবে সেট করতে পারবেন না )

— এড্রিক

@ user2899728 শর্তাধীনভাবে নির্দেশিকাগুলি প্রয়োগ করার কোনও উপায় নেই। আপনি যা চেয়েছিলেন তা দেওয়ার চেষ্টা করেছি (শেষ ফলাফল) একটি ভিন্ন পদ্ধতির ("অর্থ") দিয়ে।

— মোশে

আপনি যখন কোনও সৃজনশীল বিকল্প প্রস্তাব করেন, সাধারণত আপনি নিজের উত্তরটি দিয়ে কোথায় যাচ্ছেন তা বর্ণনা করার জন্য প্রথমে প্রথমে মন্তব্যের একটি লাইন রাখতে সহায়তা করে।

— বিভিডিবি

@ বিভিডিবি আপনার সদয় কথার জন্য আপনাকে ধন্যবাদ আমি নির্দেশ ছাড়াই লিখছিলাম, এবং এটি একটি ভুল ছিল। ভবিষ্যতে, আমি এই পোস্টটি সম্পাদনা করব বলে আশা করি, কারণ এটি এমনকি একজনকে সহায়তা করতে পারে।

— মোশে

Answer 13

আপনি কী করতে পারেন সে সম্পর্কে আমি আরেকটি ধারণা পেয়েছি।

আপনি যে এইচটিএমএলটি চান সেটিকে স্ট্রিং হিসাবে পরিবর্তনশীল হিসাবে প্রতিস্থাপন করতে পারেন এবং তারপরে ডোমসানাইটিজারেরbypassSecurityTrustHtml পদ্ধতিটি ব্যবহার করে আপনার ইচ্ছা অনুযায়ী নির্দেশটি যুক্ত / সরিয়ে ফেলতে পারেন ।

আমি একটি পরিষ্কার সমাধানের ফলাফল দিই না তবে কমপক্ষে আপনাকে কোডটি পুনরাবৃত্তি করতে হবে না।

Answer 14

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

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

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

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

সম্পাদনা

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

Comments

আপনি উভয় ক্ষেত্রেই নির্দেশকে বিভিন্ন বিকল্পের (যেমন, কমলা বা সবুজ) প্রয়োগ করেন। প্রশ্নটি শর্তের ভিত্তিতে নির্দেশকে এড়িয়ে যাওয়ার জন্য জিজ্ঞাসা করে।

— মোজতাবা