조건부로 지시문 적용

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

예를 들면 :

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

또 다른 예 : 플 런커에서 기본 동적 반응 형을 만들었습니다. formArrayName컨트롤 배열에 반응 형 지시문을 사용 하고 있습니다. formArrayName특정 조건이 참인 경우에만 지시문 을 적용하고 , 그렇지 않으면 formArrayName지시문을 추가하지 않습니다 .

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

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

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

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

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

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

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

최신 정보:

condition ? '' : null가치로 작동 하는 방법 :

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

업데이트 : plunker 업데이트 : fork (버전 문제 수정, 질문은 원래 각도 4를 기반으로했습니다)

이미 언급했듯이 이것은 가능하지 않은 것 같습니다. 최소한 일부 중복을 방지하는 데 사용할 수있는 한 가지는 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.

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

지시문 클래스에서 입력 변수를 만듭니다.

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

트릭을 할 것입니다. 플 런커

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

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

다음과 같이 각도 4, 이온 3에서 작동합니다.

[color]="condition ? 'primary' : ''"condition이것이 활성 페이지인지 아닌지를 결정하는 함수는 어디에 있습니까 ? 전체 코드는 다음과 같습니다.

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

현재 NO컴포넌트에 디렉티브를 조건부로 적용하는 방법이 있으며 이는 지원되지 않으며, 생성 한 컴포넌트는 조건부로 추가 또는 제거 할 수 있습니다.

에서 이미 생성 된 문제가 있으므로 angular2angular4에서도 마찬가지입니다.

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

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

누군가를 도울 것입니다.

아래 예제 에는 속성이 설정된 경우에만 지시문을 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>코드가 중복되지 않습니다 .

네 가능합니다.

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

}

null지시문에 전달 하면 제거됩니다!

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

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

당신이 무엇을 할 수 있는지에 대한 또 다른 생각이 있습니다.

대체하려는 html을 문자열로 변수에 저장 한 다음 DomSanitizerbypassSecurityTrustHtml 메서드를 사용하여 원하는대로 지시문을 추가 / 제거 할 수 있습니다 .

깨끗한 솔루션을 제공하지는 않지만 적어도 코드를 반복 할 필요는 없습니다.

2019 년 1 월 18 일에 Angular 5 이상에서 조건부로 지시문을 추가 한 방법입니다. 을 <app-nav>기반으로 구성 요소 의 색상을 변경해야 했습니다 darkMode. 페이지가 어두운 모드에 있는지 여부.

이것은 나를 위해 일했습니다.

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

누군가에게 도움이되기를 바랍니다.

편집하다

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