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

Question

我这里有一个角度组件是我的组件

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

这里在模板中我使用你好作为标签文本

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

<labedate></labedate>

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

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

Answer 1

您正在寻找的是组件中的@Input

请参阅此处的文档：https://angular.io/guide/component-interaction

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

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

然后你可以在html部分中使用它

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

Answer 2

我想你需要的只是@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的基本工作演示）