[angular] 조건부로 지시문 적용

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