角度-修改app.component.html中的组件属性

Question

我有一个名为“ input-text”的组件，其中只有html文本框。

<input type="text" />

现在，我在我的app.component.html中使用此组件，但我想将此文本框的类型更改为电子邮件，密码等。

<app-input-text>??</app-input-text>

我该如何实现？

Answer 1

如果您想使用component的方式，只需添加@Input() type: string并在html中使用它

input-text.component.ts

export class InputTextComponent {
   @Input() type: string
}

input-text.component.html文件

<input [attr.type]="type" />

以及包含input-text.component的元素

<app-input-text [type]="inputType"></app-input-text>
where `inputType` is string type for input like `email, password, text...`

Answer 2

尝试一下：

input.component.ts

import { Component, Input } from "@angular/core";

@Component({
  selector: "app-input",
  template: `
    <input [type]="type" />
  `
})
export class InputComponent {
  @Input() type: String;
}

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <div>
      <h2>Stack Overflow</h2>
      <app-input type="text"></app-input>
      <app-input type="checkbox"></app-input>
      <app-input type="radio"></app-input>
    </div>
  `
})
export class AppComponent {}

这是演示：https://codesandbox.io/s/21p1y9vqqj