재료 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
컴포넌트에 디렉티브를 조건부로 적용하는 방법이 있으며 이는 지원되지 않으며, 생성 한 컴포넌트는 조건부로 추가 또는 제거 할 수 있습니다.
에서 이미 생성 된 문제가 있으므로 angular2
angular4에서도 마찬가지입니다.
또는 ng-if 옵션을 선택할 수 있습니다.
<button ngIf="!condition"></button>
<button ngIf="condition" md-raised-button></button>
