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>

或在[aria-label]="ariaLabel"和template中添加@Input() ariaLabel = "";，然后在使用自定义组件时将其称为[ariaLabel]="'Age'"？

当我以第二种方式做到这一点时，Window的讲述者宣布我放入的咏叹调标签，但第一种方式，它没有说什么。

Answer 1

根据docs，您可以在任何html元素上使用aria-label，但它不像您在第一次尝试时使用的方式attr.aria-label在自定义角度上使用element（因为未在您创建的此自定义元素上定义属性attr）。在第二种方法中，您基本上是通过@Input属性将aria-label的值传递给自定义元素<input-debounce>，并正确地分配给属性aria-label，如{{3}中所述（您不必初始化您在组件中作为@Input传递的属性的值，因为它已经从父模板获取了一个值）。

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

其他2个@Input声明也是如此，并且它们已经通过输入属性（属性）获取值。您只需指定其type，'字符串'（或其他任何内容），就像ariaLabel一样。设置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;
}

希望这是有道理的。

将属性添加到自定义Angular 2组件

1 个答案: