이항 2 구성 요소를 무시하고 기본 html 태그 사용

Question

기본 button 태그를 확장하는 사용자 정의 button 요소를 만들고 싶다고 가정 해 봅니다.

내 component 다소 같을 것이다 :

@Component({ 
    selector: 'my-button', 
    styles: [] 
    template: `<button><ng-content></ng-content></button>` 
}) 
export class MyButton{} 

문제는 대신 일반 HTML 버튼을, 나는이 ionic2 버튼을 얻을 수 있다는 것입니다. 이온 2 버튼 구성 요소를 우회하여 내 단추를 만들 수 있습니까?

Answer 1

anchor 요소를 사용해 보셨습니까?

<a class="my-button"><ng-content></ng-content></a> 

일부 기본 버튼 다음과 같은 스타일 (또는 당신이 그것을에 적용 할 스타일) :

a.my-button { 
    align-items: flex-start; 
    text-align: center; 
    cursor: default; 
    color: buttontext; 
    border-image-source: initial; 
    border-image-slice: initial; 
    border-image-width: initial; 
    border-image-outset: initial; 
    border-image-repeat: initial; 
    background-color: buttonface; 
    box-sizing: border-box; 
    padding: 2px 6px 3px; 
    border-width: 2px; 
    border-style: outset; 
    border-color: buttonface; 
    padding: 1px 6px; 
    text-rendering: auto; 
    color: initial; 
    letter-spacing: normal; 
    word-spacing: normal; 
    text-transform: none; 
    text-indent: 0px; 
    text-shadow: none; 
    display: inline-block; 
    text-align: start; 
    margin: 0em 0em 0em 0em; 
    font: 13.3333px Arial; 
}