Условное включение с использованием ng-контента при переносе html или другой подход? - PullRequest
Новая
       82

Условное включение с использованием ng-контента при переносе html или другой подход?

0 голосов
/ 26 сентября 2019

Я строю автозаполненный компонент, используя угловой материал .Для автозаполнения должен быть добавлен компонент mat-chip-list & mat-chip в зависимости от @ Input (): hasChips .Проблема заключается в том, что mat-chip-list html переносит входной html, поэтому я решил создать компонент mat-chip, который будет преобразовывать входные данные, используя два разных тега ng-content: 1. нг-контент, обернутый тегами mat-chips 2. ng-контент, который не обернут ни одним ng-контентом

Компонент упаковки html: 

<app-mat-chips 
[showChips]="hasChips"
[chipsList]="chipsList">
    <input type="text" #textInput > //should be wrapped with mat-chips if hasChips === true
</app-mat-chips>

компонент mat-chips с тегами ng-content: 

<mat-chip-list aria-label="Fruit selection" *ngIf="showChips else dontShow">
  <mat-chip *ngFor="let chip of chipsList">
    {{chip}}
  </mat-chip>
  <ng-content></ng-content>
</mat-chip-list>
<ng-template #dontShow>
    <ng-content></ng-content>
</ng-template>

На самом деле я пытаюсь решить,как рендеринг HTML будет отображаться в зависимости от условия, в то время как его содержимое будет отображаться всегда.Итак, у меня есть вопросы по этому вопросу: 1. Почему ng-контент не отображает элемент ввода, и как мне это исправить? 2. Это правильный подход?

Примечание:* Я прочитал кучу статей, некоторые используют атрибут select , но они используют его, когда одновременно отображаются два разных тега ng-content, нацеленные на каждый ng-контент по отдельности.Это не то, что мне нужно, потому что я включаю только один компонент / input-element.* В других статьях рассказывается о NgComponentOutlet для динамического рендеринга компонентов ... но я хочу использовать transclusion для простого повторного использования в html.

...