Question

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

假设我有一个组件，除其他外，@Output是一个事件，就像这样

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

可以使用“ 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>

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

2 个答案: