Настройка общих компонентов в Angular

Question

Мне сказали сделать несколько тегов для всех общих компонентов в приложении Angular, чтобы можно было вносить мгновенные изменения и улучшать управление. Таким образом, страница будет в основном включать эти компоненты, такие как:

<cx-card>
  <cx-lbl>Some text</cx-lbl>
  <cx-btn>Click Me</cx-btn>
</cx-card>

Мои вопросы:

1. Компоненты работают нормально, когда одни, но метка / кнопка не появляется, когда внутри карта. Как я могу это исправить?
2. По умолчанию мои компоненты пусты (задан только дизайн). Но в приведенном выше примере не отображается «Некоторый текст» и «Нажмите меня». Как сделать это возможным?

Некоторые реальные примеры должны быть идеальными, но даже ссылка на некоторую ссылку будет полезна. Заранее спасибо! Извините за вопрос новичка.

Answer 1

Вы должны воспользоваться тегом ng-content. Это проецирует содержимое тега в сам компонент.

Таким образом, HTML вашего cx-card компонента может быть.

<div class="cx-card">
  <ng-content></ng-content>
</div>

Теперь все, что находится между <cx-card>...</cx-card>, будет появляются там, где вы поместили тег ng-content в HTML компонента cx-card.

То же самое относится и к cx-label и cx-btn. Используйте ng-content в своих HTML для представления Some Text и Click Me. Для этого вы также можете воспользоваться свойством @Input каждого компонента. Примерно так:

В cx-label компонент TS:

@Input() text: string;
....HTML...
<div class="cx-label">{{text}}</div>
....HTML where it is used....
<cx-lbl [text]="'Some text'"></cx-label>

А в cx-btn компонент:

@Input() text: string;
...HTML...
<div class="cx-btn">{{text}}</div>
...HTML where it is used...
<cx-btn [text]="'Click Me'"></cx-btn>

Я бы лично сделал @Input для кнопка и метка и ng-content для cx-card.

https://blog.angular-university.io/angular-ng-content/ (настоящее глубокое погружение в ng-content).