값이없는 각도 2 컴포넌트 입력

값이 필요없는 속성이있는 컴포넌트를 만들고 싶습니다. 예를 들어, 대신이 같은 뭔가 (내가 지금 가지고있는)값이없는 각도 2 컴포넌트 입력

<app-document [mode]="'edit'" ... ></app-document>

또는

는

<app-document [editMode]="true" ... ></app-document>

는 차라리 것 :

<app-document editMode ...></app-document>

를 따라서 구성 요소 자체가 있는지 여부를 확인한다 속성 editMode이 존재하는지 여부. 이러한 속성이 많은 경우 훨씬 더 깨끗하게 보일 것입니다. 이 작업을 수행하는 방법에 대한 문서를 보지 못했습니다. 그것은 가능합니까?

출처

2017-05-15 AlanObject

이렇게하려면 부울 @Input을 사용할 수 있습니다.

HTML :

<app-document [editMode] ...></app-document>

TS :

export class AppDocumentComponent { 
    @Input() editMode: boolean = true; 
    // ... 
}

지금 당신은 당신이 당신의 행동을 변경하는 데 사용할 수있는 부울 있습니다.

이

private _editMode: boolean; 
@Input() 
get editMode() { return this._editMode; } 
set editMode(value: any) { this._editMode = coerceBooleanProperty(value); }

HTML :

/** Coerces a data-bound value (typically a string) to a boolean. */ 
export function coerceBooleanProperty(value: any): boolean { 
    return value != null && `${value}` !== 'false'; 
}

이로 사용

출처

2017-05-15 23:03:17 0xcaff

나는 그 패턴을 생각하지 못했지만 꽤 똑똑합니다. 내가 잘못하지 않는다면 editMode의 값은 직관적 인 것의 역 (부울이 아닌)이지만 나는 그걸로 살 수 있습니다. @Input ('editMode')와 같은 것입니다. notEditMode : boolean = true ;. 카페인과 원숭이가 꽤 잘 어울리는 것 같아. – AlanObject

Material2는 다음과 같은 방법을 썼다는 Material2에를 사용하는 경우

editMode == true 
<app-document editMode></app-document> 

editMode == false 
<app-document></app-document>

는 단순히 가져올 수 있습니다 그것을

import {coerceBooleanProperty} from '@angular/cdk/coercion';

출처

2017-10-02 10:18:49

값이없는 각도 2 컴포넌트 입력

답변

관련 문제