Как извлечь вывод углового компонента во внешнее деление

Question

Я хотел бы отображать разные списки (определенные компонентом), но отображать их заголовки, только если дочерний компонент создает необходимый Output.

Скажем, у меня есть компонент, который, среди прочего,вещи, @Output s событие, вот так

export class ItemListComponent implements OnInit {

  @Input()
  private filter: (t: Item) => boolean;

  private tasks: TaskItem[];

  @Output()
  isEmpty = new EventEmitter();

В моем другом компоненте я отображаю этот список, вводя необходимые filter, например,

<div> list header  <-- I would love to hide that -->
<app-item-list [filter]="filter" *ngIf="!(isEmpty)">
</app-item-list>
</div>

Я могускрыть список предметов в зависимости от (isEmpty), но можно ли скрыть div выше?

Answer 1

Вы можете использовать переменную в .parent.ts, чтобы скрыть и показать свои div

item-list.component.ts

export class ItemListComponent implements OnInit {

  @Input()
  private filter: (t: Item) => boolean;

  private tasks: TaskItem[];

  @Output()
  isEmpty = new EventEmitter(Boolean);

.parent.html

<div *ngIf="isShow"> list header  <-- I would love to hide that -->
<app-item-list [filter]="filter" *ngIf="!(isEmpty)" (isEmpty)="myFunc(e)">
</app-item-list>
</div>

.parent.ts

isShow = true;

myFunc(e){
  this.isShow = e;
}

Answer 2

Вместо 'div' вы можете использовать 'ng-container'.

<ng-container*ngIf="isShow"> list header  <-- I would love to hide that -->
<app-item-list [filter]="filter" *ngIf="!(isEmpty)" (isEmpty)="myFunc(e)">
</app-item-list>
</ng-container>