カスタムアンギュラ2コンポーネントに属性を追加する適切な方法

Question

カスタム入力コンポーネントが角度2にあります。カスタムコンポーネントに属性を追加する適切な方法は何ですか？私たちの入力コンポーネントの要点は、このようなものです。

入力-debounce.component.ts

var template = ` 
    <input 
    [type]="inputType" 
    [placeholder]="placeholder"> 
`; 

@Component({ 
    selector: "input-debounce" 
    template: template 
}) 

export class InputDebounceComponent { 
    @Input() inputType: string = "text"; 
    @Input() placeholder: string = ""; 
} 

カスタムコンポーネントにaria-label属性を追加する適切な方法は何ですか？

<input-debounce 
    [inputType]="'number'" 
    [placeholder]="'Enter Number'" 
    [attr.aria-label]="'Age'"> 
</input-debounce> 

またはtemplateで[aria-label]="ariaLabel"を追加して、クラスの@Input() ariaLabel = "";カスタムコンポーネントを使用した場合、その後、[ariaLabel]="'Age'"のようにそれを呼び出しますか？

私が2番目のやり方をしたとき、ウィンドウのナレーターは私が入れたアリアラベルを発表しますが、最初の方法は何も言いません。

Answer 1

docs 1として、あなたは任意のHTML要素にaria-labelを使用することができますが、プロパティattrは、この上で定義されていないので、それは（あなたが最初の試み、カスタム角度要素にattr.aria-labelで使用される方法のように動作しません。あなたが作成したカスタム要素）。 2つ目の方法では、基本的にaria-labelの値をカスタム要素<input-debounce>に@Inputプロパティで渡し、docsに記載されているようにaria-labelというプロパティに正しく割り当てます（渡したプロパティの値を初期化する必要はありません）。親テンプレートからすでに値が割り当てられているので、コンポーネント内では@Inputとして使用されます）。

// this declaration below 
// @Input() ariaLabel = ""; 
// can be changed to 
@Input() ariaLabel: string; 

同じことが他の2 @Input宣言のために行くだけでなく、彼らはすでに入力されたプロパティ（属性）を通過した値を取得しています。 ariaLabelのように、type、 '文字列'（またはそれが何であれ）を指定する必要があります。 aria-label（ここではariaLabel）を設定するための@Inputプロパティの名前は、コンポーネントのテンプレート内のaria-label属性に正しく割り当てられていれば問題ありません。

一般化するには、あなたが宣言することができます（任意の）カスタム入力プロパティ名、customForAriaLabel言うと、それをこのようなコンポーネントのテンプレート内で使用される値を渡す

親テンプレート

<input-debounce 
    [inputType]="'number'" 
    [placeholder]="'Enter Number'" 
    [customForAriaLabel]="'Age'"> 
</input-debounce> 

テンプレートを使用したカスタムコンポーネント

var template = ` 
    <input 
    [type]="inputType" 
    [placeholder]="placeholder" 
    [aria-label]="customForAriaLabel"> 
`; 

@Component({ 
    selector: "input-debounce" 
    template: template 
}) 

export class InputDebounceComponent { 
    @Input() inputType: string; 
    @Input() placeholder: string; 
    @Input() customForAriaLabel: string; 
} 

これは意味があると思います。