如何在Angular 4中更改模板内的labeltext

Question

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

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

这里的模板我使用hello作为标签文本

这里的组件是在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的基本工作演示）