打开和关闭组件 Angular 4 它不能正常工作

Question

我已经创建了一个类似弹出窗口的组件，但我在那里遇到了问题。 当我打开此组件然后单击取消时，它会隐藏，但是我需要单击 2 次编辑才能再次打开该组件，如果我单击以编辑一个项目并在弹出窗口中单击取消，然后再单击一个来编辑它们，它们都处于活动状态. 如果有人不理解问题，请在评论中写下或提出编辑建议。

这是我的代码。

这是父组件

<app-edit-dialog-vi *ngIf="showChild" [data]="dataToPass" [showMePartially]="showChild"></app-edit-dialog-vi>
<div class="dropdown-menu-item" (click)="edit({valueItem: valueItem})">{{'button.#edit'|translate}}</div>


 <div [class]="'name-block name-block-width-' + valueItem.level" [ngClass]="{active: activeSelected === valueItem.id}" (click)="toggleExpand()">
    {{valueItem.name}} </div>


showChild = false;
activeSelected: any = '';

edit(editOptions: EditViOptions) {
  this.showChild = !this.showChild;
  console.log(this.showChild, '##');
  if (editOptions.valueItem || editOptions.appendToParentId) {
    this.dataToPass = editOptions;
    this.activeSelected = editOptions.valueItem.id;
  }
}

这是弹出窗口

<div *ngIf="showMePartially" class="container">
</div>

  @Input() showMePartially = true;
  @Input() data: EditViOptions = null;


cancel() {
    this.showMePartially = false;

  }

Answer 1

您需要 2 路绑定来部分显示：

<app-edit-dialog-vi *ngIf="showChild" [data]="dataToPass" [(showChild)]="showChild" (emitToRemove)="activeTab = 0"></app-edit-dialog-vi>
edit(editOptions: EditViOptions) {
  this.showChild = true;
}

在此组件中，您在点击时将showMePartially 设置为true。

然后在弹出组件中，你有输入和输出：

@Input() showChild: boolean;
@Output() showChildChange = new EventEmitter<boolean>();

然后关闭：

this.showChildChange.emit(false)

用于更改所选项目：

<div click="changeTab(1)" *ngIf="activeTab === 1">First Active</div>
<div click="changeTab(2)" *ngIf="activeTab === 2">Second Active</div>

activeTab = 1;
changeTab(active){
  this.activeTab = active;
}

如果您在关闭弹出窗口时需要更改或删除活动状态，请在关闭时发出一些东西：

@Output() emitToRemove = new EventEmitter();

我在开始监听器的代码中添加了输出。