각도 4는 컴포넌트 템플릿에 선언 할 때 속성을 적용합니다 (포장 요소를 렌더링하지 않음)

Question

사용자 정의 버튼을 만들고 싶다고합시다. 그래서 나는 구성 요소

import { Component, Input } from '@angular/core'; 
@Component({ 
    selector: '[extended-button]', 
    template: `<button (click)="onClick($event)"></button>`, 
    styles: [] 
}) 
export class ExtendedButtonComponent { 
    @Input() disabled: boolean; 
} 

을 만들 그리고이 버튼의 인스턴스를 사용할 때 HTML에 선언하는 템플릿 내부의 버튼에 적용 할 때 나는 attibutes에게 I 유형을 원하는 :

<div extended-button class="some-nice-button"></div> 

따라서이 결과는 다음과 같습니다 난 정말 <div> 태그를 렌더링하지 않으

<button class="some-nice-button" (click)="onClick($event)"></button> 

. 어떤 아이디어를 달성하는 방법? 당신은, 당신과 같이 다른 구성 요소에 첨부 할 수있는이 custom-button를 사용하고자 할 때 다음

import { Component, Input } from '@angular/core'; 
@Component({ 
    selector: 'custom-button', 
    template: `<button [class]="className" (click)="onClick($event)>Custom Button</button>` 
}) 
export class CustomButtonComponent { 
    @Input() className: string; 
} 

: 이것은 당신이 달성하지만, 아래의 코드 조각을보고 싶은 경우

Answer 1

나는 확실하지 않다

<custom-button [className]="someClassName"></custom-button> 

그런 다음 구성 요소 TS 파일에, 당신은 someClassName를 지정해야합니다

someClassName: string = 'someRandomClassName'; 

,

이것이 도움이되기를 바랍니다.

편집 :

Answer 2

이것은 당신이 무엇을 달성하고자하는 경우 잘 모르겠어요하지만 난 이런 식으로, 당신은 HTML 태그로 선택기를 사용한다고 생각 :

<div> 
<extended-button></extended-button> 
</div>