Изменение текста и установка значения по умолчанию

Question

Это мой общий Angular компонент «messageforStudents».

messageforStudents. html:

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

messageforStudents.ts:

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

I будет использовать вышеуказанный компонент везде с этим текстом.

Но когда я использую компонент messageforStudents внутри schoolRules.html, я хочу изменить текст <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

Вы можете использовать @ Input in angular.

Примерно так

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

А затем использовать компонент

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

Если вы не пройдете firstText или secondText, будет использовано значение по умолчанию, которое вы установили.

Answer 3

Украсить firstText = "Default text 1."; переменную декоратором @Input;

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

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

Вы можете сделать это аналогично для secondText;

Если вы не передаете какие-либо значения в качестве входных <messageforStudents></messageforStudents>, это вернется к тексту по умолчанию, который вы назначили в компоненте, т.е. "Default text 1.", и покажет, что вместо этого