각도 2 :</p> <pre><code><my-input label="Street" [(ngModel)]="address.street"></my-input> </code></pre> <p>그런 다음이 MyInputComponent의 인스턴스를 : 나는이처럼 사용할 때 그래서 등 라벨, 레이아웃, 부트 스트랩 클래스, 내 자신의 <code><input></code> 구성 요소를 정의하고

Question

구성 요소 정의에서 속성 목록에 액세스

<div class="form-group"> 
    <label class="col-sm-3 control-label">{{ label }}</label> 
    <div class="col-sm-9"> 
     <input [(ngModel)]="value" class="form-control"> 
    </div> 
</div>` 

이 큰 작업을하고 난 그냥 @Input를 사용하여 "라벨"속성에 액세스 할 수 있습니다 :

을하는 같은 무언가를 생성하는 다양한 템플릿을 사용합니다

@Component({...}) 
export class MyInputComponent { 
    @Input() label = ''; 

이제는 몇 가지 속성에 대해 설명합니다. 그러나 HTML 표준 <input> 태그는 문자 그대로 type, min, max, placeholder ...과 같은 수십 가지 속성을 가지고 있으며 가능한 모든 모든 속성을 MyInputComponent의 @Input 속성으로 정의하고 싶지 않습니다.

대신 동적으로 <my-input>의 속성을 반복하여 내 템플릿의 <input> 요소에 복사하고 싶습니다.

constructor(eref: ElementRef) { 
    console.log("***", eref.nativeElement); 
} 

을하지만 접근 nativeElement 몇 가지 이유 (https://angular.io/docs/js/latest/api/core/index/ElementRef-class.html 참조)에 대한 나쁜 관행으로 권장되지 않습니다 : 내가 그 nativeElement 속성을 생성자로하여 elementRef를 사용하여 다음에 액세스하여 DOM 요소의 속성 목록에 액세스 할 수 있습니다 알고 있습니다.

그래서 질문 : 기본 브라우저 DOM을 직접 읽지 않고 <my-input>의 속성 목록에 액세스 할 수있는 방법이 있습니까?

마찬가지로 중립적 인 방식으로 속성 목록을 얻은 다음 템플릿의 <input> 태그에 어떻게 적용 할 수 있습니까?

Answer 1

환상적인 MyInputComponent에서 입력을 줄이기 위해 transclusion을 사용하는 것이 더 좋을 것이라고 생각합니다.

https://toddmotto.com/transclusion-in-angular-2-with-ng-content

은 기본적으로 당신이 바꿀 것 : 이것에

<my-input label="Street" [(ngModel)]="address.street"></my-input> 

:

<my-input label="Street"> 
    <input [(ngModel)]="address.street"class="form-control"> 
</my-input> 

그래서 당신은 여전히 ​​모든 입력 속성에 액세스 할 수있는 다음과 블로그에서보세요 쉽게 작업하고 원하는 장식을 쉽게 얻을 수 있습니다.