web-dev-qa-db-ja.com

条件付きでディレクティブを適用する

私はmd-raised-buttonを追加するために資料2を使用しています。

特定の条件が満たされた場合にのみこのディレクティブを適用したいと思います。

例えば：

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

別の例：私はplunkerで基本的な動的反応型を作りました。コントロールの配列には、反応型のformArrayNameディレクティブを使用しています。特定の条件が満たされた場合にのみformArrayNameディレクティブを適用したいです。そうでなければformArrayNameディレクティブを追加しないでください。私はいろいろと試してみましたが、解決策を見つけることができました。

ここにプランカーのリンクがあります： https://plnkr.co/edit/oPZ7PyBSf8jjA2KVh4J?p=preview

どんな貢献でも本当に感謝します。

前もって感謝します！

angularangular-materialangular2-formsangular2-directivesangular-material2
61
user2899728

条件に基づいてディレクティブを適用できるかどうかはわかりませんが、回避策では2つのボタンが表示されます。そして条件に基づいて表示します。

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

編集：多分 this が役に立つでしょう。

30
LLL

以下の方法を使用できます。

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

あなたのプランカーにも同じことを適用した。 fork

更新：

condition ? '' : nullが値として機能するしくみ：

空の文字列（''）の場合はattr.md-raised-button=""になり、そのnullの場合は属性は存在しません。

更新：plunker更新： fork （バージョンの問題は修正されました。質問は元々角度4に基づいていたことに注意してください）

55
Aldracor

これは遅くなるかもしれませんが、条件付きでディレクティブを適用するための実行可能で洗練された方法です。

ディレクティブクラスで入力変数を作成します。

@Input('myDirective') options: any;

ディレクティブを適用するときは、入力変数のapplyプロパティを設定します。

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

ディレクティブのメソッドで変数this.options.applyをチェックし、条件に基づいてディレクティブロジックを適用します。

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

    // directive logic
}
9
Tiha

他の人も述べているように、directivesは動的には適用できません。

ただし、md-buttonのスタイルをflatからに変更するじゃあこれ

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

トリックをするだろう。 Plunker

8
Ankit Singh

すでに述べたように、これは可能ではないようです。少なくとも一部の重複を防ぐために使用できることの1つはng-templateです。これにより、ngIf分岐の影響を受ける要素の内容を抽出できます。

たとえば、Angular Materialを使用して階層メニューコンポーネントを作成する場合は、次のようにします。

<!-- 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を介して両方の場所に挿入されます。

7
H.B.

現在、NOディレクティブをコンポーネントに条件付きで適用する方法があります。これはサポートされていません。作成したコンポーネントは、条件付きで追加または削除できます。 。

angular2と同じ問題がすでに発生しているので、angle4でも同様です。

あるいは、ng-ifでオプションを選ぶことができます。

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

私はニースの既存の解決策を見つけることができなかったので、私はこれをする私自身の指令を作りました。

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
Cappi10

はい、可能です。

appActiveAhoverディレクティブを含むHTMLページ:)

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

}
2
Chaitanya Nekkalapudi

これも解決策になります。

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

これは、角度4、イオン3のように動作します。

[color]="condition ? 'primary' : ''"ここでconditionは、これがアクティブなページかどうかを決定する関数です。コード全体は次のようになります。

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

1
zalog

2019年1月18日現在、これがAngular 5以降で条件付きでディレクティブを追加した方法です。 darkModeに基づいて<app-nav>コンポーネントの色を変更する必要がありました。ページがダークモードかどうか.

これは私のために働いた：

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

これが誰かに役立つことを願っています。

0
Sandra israel

私はあなたができることについて別の考えを得ました。

置き換えたいHTMLを文字列として変数に格納してから、 DomSanitizer のbypassSecurityTrustHtmlメソッドを使用して、必要に応じてディレクティブを追加または削除することができます。

私はきれいな解決策にはなりませんが、少なくともコードを繰り返す必要はありません。

0
LLL