将属性添加到自定义 Angular 2 组件的正确方法

Question

我们在 Angular 中有一个自定义输入组件 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"，在class中添加@Input() ariaLabel = "";，然后在使用自定义组件时将其命名为[ariaLabel]="'Age'"？

当我用第二种方法时，Window 的讲述人会宣布我输入的咏叹调标签，但第一种方法，它什么也没说。

Answer 1

根据 docs, you could use aria-label on any html element, but it doesn't work like the way you used in the first attempt, attr.aria-label on a custom angular element (since the property attr is not defined on this custom element you created). In the second approach, you are basically passing the value for aria-label to the custom element <input-debounce> through an @Input property and assigning correctly to the property aria-label as described in the docs（您不必初始化在组件内作为 @Input 传递的属性的值，因为它已经从父模板）。

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

其他 2 个 @Input 声明也是如此，它们已经在获取通过输入属性（属性）传递的值。您只需指定其 type、'string'（或其他任何内容），就像 ariaLabel 一样。 @Input 属性用于设置 aria-label 的名称（此处为 ariaLabel）并不重要，只要它被正确分配给组件中的 aria-label 属性即可模板。

一般化，您可以声明（任何）自定义输入属性名称，比如 customForAriaLabel 并将要在组件模板中使用的值传递给它，如下所示，

parent template

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

custom component with its template

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;
}

希望这是有道理的。

将属性添加到自定义 Angular 2 组件的正确方法

Proper way to add attribute to custom Angular 2 component

wai-aria

angular