更改文本并设置默认值

Question

这是我常用的 Angular 组件“messageforStudents”。

学生信息。html：

<span>{{firstText}}</span>
<span>{{secondText}}</span>

messageforStudents.ts：

firstText = "Default text 1.";
secondText = "Default text 2.";

我将在该文本的任何地方使用上述组件。

但是，当我在schoolRules.html中使用messageforStudents组件时，我想更改<span>{{firstText}}</span>和<span>{{secondText}}</span>的文本。 我怎样才能做到这一点？

Answer 1

通过使用输入属性，您可以传递如下数据。

messageForStudents.ts

@Input() firstText = "Default text 1.";
@Input() secondText = "Default text 2.";

schoolRules.component.html

<message-students [firstTest]="changedValueFirst" [secondText]="changedValueSecond"></message-students>

schoolRules.component.ts

changedValueFirst="Custom String 1";
changedValueSecond= "Custom String 1";

在其他组件中使用它：-

<message-students></message-students>

Answer 2

装饰firstText = "Default text 1."; 带有 @Input 装饰器的变量；

@Input() firstText = "Default text 1.";

<messageforStudents [firstText]="any other text"></messageforStudents>

您可以对 secondText 进行类似的操作；

如果您不传递任何值作为输入<messageforStudents></messageforStudents> ，它将回退到您在组件中分配的默认文本，即"Default text 1." 并表明

Answer 3

您可以在 angular 中使用@Input 。

像这样的东西

@Input firstText = "Default text 1.";
@Input secondText = "Default text 2.";

然后使用组件

<MessageforStudents [firstText]="foo" [secondText]="bar"></MessageforStudents>

如果您不传递firstText或secondText ，它将采用您设置的默认值。