Есть такой компонет Angular 8:
// a.component.ts
@Component({
selector: 'app-a'
templateUrl: './a.component.html',
})
class AComponent {
@Input() text: string;
}
// a.component.html
<ng-content></ng-content>
И такой:
// b.component.ts
@Component({
selector: 'app-b'
templateUrl: './b.component.html',
})
class BComponent{
@Input() text: string = "none";
}
// b.component.html
<div>
text: {{ text }}
</div>
Как сделать так, чтобы использовать не так:
// app.component.html
<app-a text="ABCDE">
<app-b text="ABCDE"></app-b>
<app-b text="ABCDE"></app-b>
<app-b text="ABCDE"></app-b>
</app-a>
А вот так, а текст "ABCDE" передался всем вложенным компонентам app-b уже из самого шаблона a.component.html:
// app.component.html
<app-a text="ABCDE">
<app-b></app-b>
<app-b></app-b>
<app-b></app-b>
</app-a>
Средний
