如何将角度分量输出提取到外部 div

Posted 2023-03-13

【中文标题】如何将角度分量输出提取到外部 div

【英文标题】：How to extract angular component output to an outer div

【发布时间】：2019-08-26 03:05:20

【问题描述】：

我想显示不同的列表（由组件定义），但仅在子组件生成必要的Output 时才显示它们的标题。

假设我有一个组件，除此之外，@Outputs 是一个事件，就像这样

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吗？

【问题讨论】：

什么时候隐藏div？

请在 stackblitz 上重现该问题。它可以帮助贡献者帮助您。

【参考方案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;

【参考方案2】：

您可以使用“ng-container”来代替“div”。

<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>