javascript - 更改文本并设置默认值

Question

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

messageforStudents.html：

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

messageforStudents.ts：

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

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

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

score 1 · Accepted Answer

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

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>

score 0 · Accepted Answer

firstText = "Default text 1.";使用 @Input 装饰器装饰变量；

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

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

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

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

score 0 · Accepted Answer

您可以在角度中使用@Input。

像这样的东西

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

然后使用组件

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

如果您不通过firstText，否则secondText它将采用您设置的默认值。

3 回答 3