조건부로 지시사항 적용

조건부로 지시사항 적용

재료 2를 사용하여 추가하고 있습니다.md-raised-button저는 특정 조건이 충족될 경우에만 이 지침을 적용하고 싶습니다.

예:

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

다른 예:플런커에서 기본적인 동적 반응형을 만들었습니다.사용 중formArrayName제어 배열에 대한 반응형 지침.지원하고 싶습니다formArrayName지시는 특정 조건이 참인 경우에만, 그렇지 않은 경우에는 추가하지 않음formArrayName지시의

여기 플런커 링크가 있습니다.

CSS 규칙을 트리거하기 위해 속성을 추가하기만 하면 되는 경우 다음 방법을 사용할 수 있습니다. (이것은 동적으로 지시문을 생성/파괴하지 않습니다.)

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

플런커에도 동일하게 적용: 포크

업데이트:

어떻게.condition ? '' : null값으로 작동합니다.

빈 문자열일 때('')가 됩니다.attr.md-raised-button=""때가 되면null특성이 존재하지 않습니다.

업데이트: 플런커 업데이트: 포크(버전 문제가 해결되었습니다. 질문은 원래 각도 4를 기반으로 했습니다.)

조건에 따라 지침을 적용할 수 있을지는 모르겠지만, 해결 방법은 버튼이 2개이고 조건에 따라 표시하는 것입니다.

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

편집: 아마도 이것이 도움이 될 것입니다.

이미 언급했듯이 이것은 불가능한 것으로 보입니다.최소한 일부 중복을 방지하기 위해 사용할 수 있는 한 가지 방법은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.

이것은 늦게 올 수도 있지만, 조건부로 지침을 적용하기 위한 실행 가능하고 우아한 방법입니다.

디렉티브 클래스에서 입력 변수를 만듭니다.

@Input('myDirective') options: any;

지침을 적용할 때 입력 변수의 적용 속성을 설정합니다.

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

지시 방법에서 변수 this.options.apply를 확인하고 조건에 따라 지시 논리를 적용합니다.

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

    // directive logic
}

다른 사람들도 말했듯이,directives동적으로 적용할 수 없습니다.

하지만, 만약 당신이 단지 전환하고 싶다면.md-button의 스타일은 플랫에서 업으로, 그리고 이것.

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

할 수 있을 겁니다플런커

현재 구성 요소에 조건부로 지시문을 적용하는 방법이 있습니다.지원되지 않습니다.생성한 구성 요소는 조건부로 추가하거나 제거할 수 있습니다.

에서 동일한 문제가 이미 생성되었으므로 angular4에서도 마찬가지일 것입니다.

또는 ng-if 옵션을 선택할 수 있습니다.

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

아마도 누군가에게 도움이 될 것입니다.

아래의 예에서 나는 다음을 가지고 있습니다.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>암호를

이것도 해결책이 될 수 있습니다.

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

---

이것은 다음과 같이 각 4, 이온 3에 작용합니다.

[color]="condition ? 'primary' : ''"condition는 활성 페이지인지 여부를 결정하는 함수입니다.전체 코드는 다음과 같습니다.

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

싱패null지시에 따라 그것을 제거합니다!

<button md-raised-button="condition ? true : null"></button>

는 함께일있다니습고하와 함께 일하고 .Angular Material에 요소 *ngIf제게는 제대로 작동하지 않았습니다. (그 요소는 새로 생성된 많은 재료 HTML 태그 안에서 사라집니다. lol.

그게 좋은 방법인지는 모르겠지만, 저는 사용했습니다.OnChanges그리고 저는 일종의 조건부 지시가 있었습니다 - 그리고 그것은 효과가 있었습니다.

그래서 이렇게 해결했습니다.

import { Directive, Renderer2, ElementRef, Input, OnChanges, SimpleChanges, AfterViewInit } from '@angular/core';

@Directive({
  selector: '[appDirtyInputIndicator]'
})
export class DirtyInputIndicatorDirective implements OnChanges, AfterViewInit {

  @Input('appDirtyInputIndicator') dirtyInputIndicator: boolean;
  span = this.renderer.createElement('span');

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.dirtyInputIndicator && this.dirtyInputIndicator) {
      this.renderer.appendChild(this.el.nativeElement, this.span);
    } else {
      this.renderer.removeChild(this.el.nativeElement, this.span);
    }
  }

  ngAfterViewInit() {
    this.renderer.addClass(this.span, 'dirty_input_badge');
  }
}

저는 기존의 좋은 해결책을 찾을 수 없었기 때문에 이것을 수행하는 저만의 지침을 만들었습니다.

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>

동일한 문제가 발생하여 다음과 같은 방법으로 해결할 수 있었습니다.

구성요소.구성요소

<tr *ngFor="let Qus of finalModel | paginate:{itemsPerPage: 10, currentPage:p}">
<td appHighlightUsa  [isUsa]="Qus.country=='United States' ? true :false">{{Qus.id | flags}}</td>
<td appHighlightUsa  [isUsa]="Qus.country=='United States' ? true :false">{{Qus.accociateId}}</td>
<td appHighlightUsa  [isUsa]="Qus.country=='United States' ? true :false" >{{Qus.country}}</td>
<td appHighlightUsa  [isUsa]="Qus.country=='United States' ? true :false" >{{Qus.country}}</td>
</tr>

당신이 할 수 있는 일에 대해 다른 생각이 있어요.

원하는할 수 .bypassSecurityTrustHtmlDomSanitizer의 메서드입니다.

깨끗한 해결책은 아니지만 적어도 코드를 반복할 필요는 없습니다.

네, 가능합니다.

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

}

사용하다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>

2019년5 로 지침을 입니다. 2019년 1월 18일 Angular 5에서 지침을 했습니다.저는 그 색을 바꿀 필요가 있었습니다.<app-nav> 성요소를 으로 한 구성 darkMode페이지가 어두운 모드인지 여부.

이것은 저에게 효과가 있었습니다.

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

이것이 누군가에게 도움이 되길 바랍니다.

편집

조건에 따라 속성(색상) 값이 변경됩니다.지시문을 사용하여 색상을 정의할 수 있습니다.따라서 이것을 읽는 사람은 혼동하지 마십시오. 이것은 조건부로 지침을 적용하는 것이 아닙니다(즉).즉, 조건에 따라 돔에 지시를 추가하거나 제거하는 것을 의미합니다.)

언급URL : https://stackoverflow.com/questions/44597077/apply-a-directive-conditionally