如何在 Angular 4 中更改模板内的标签文本

Question

我有一个 angular 组件这是我的组件

@Component({
    selector: 'labelnumeric',
    template: '<label>hello</label>'
})

在模板中，我使用 hello 作为标签文本

这里的组件是在 HTML 控件中定义的这是我的 HTML

<labedate></labedate>

所以在 HTML 控件的基础上我想更改标签文本我该怎么做？

是否可以根据属性设置名称？

Answer 1

我想你只需要 @input

@Component({
  selector: 'labelnumeric',
  template: `<label>{{numeric}}</label>`,
})
export class HelloComponent  {
  @Input() numeric: string;
}

然后像这样使用它：

<labelnumeric numeric='10'></labelnumeric>
//OR
<labelnumeric [numeric]='your_varible'></labelnumeric>

WORKING DEMO（@input的基本工作演示）

Answer 2

您要查找的是组件中的@Input

你基本上需要做的是导入输入，然后在你的组件中定义一个输入属性

@Component({
selector: 'labelnumeric',
template: '<label>{{something}}</label>'
})
export class XYZ {
@Input() something: string;
}

然后您可以在 html 部分中像这样使用它

<labelnumeric [something]= "Text"></labelnumeric>

how to change labeltext inside template in Angular 4