Angular 单击显示嵌入式组件

我有两个组件，分别是appnewemployees标题和apphelp弹出窗口。我想在单击应用程序“新员工”标题上的按钮时显示应用程序帮助弹出窗口。目前我没有看到应用程序帮助弹出，即使没有任何按钮点击功能

这是我的密码

app-new-employees-header.html

<nav>
  <div class="row row-1 new-employees-header">
    <div >
      <button id="help-btn">
        <img id="help-icon-1" src="../../../../assets/icons/note_success_xlarge_white.png">
      </button>
    </div>
  </div>
</nav>
<app-help-popout ></app-help-popout>

---

我不知道为什么弹出窗口没有显示，有什么想法吗？

首先，你有一个空格输入来处理关闭

<button id="open-btn" (click)="showHelpPopout = true"><img src="../../../assets/icons/notes_small_white.png"></button>

<app-help-popout (closePopout)="closePopout()" *ngIf="showHelpPopout"></app-help-popout>

这样，只有在单击按钮后，弹出组件才会加载。然而，如果您需要一直加载它，因为这将在您每次关闭它然后再次打开它时重新创建组件，那么您可以应用您的方法并修复输入错误

---

最好的方法是在第一次单击按钮时加载组件，然后保持加载状态，以允许在不重新创建组件的情况下切换打开/关闭。

->*ngIf=isOpen--我认为是您的问题，因为isOpen是错误的。您在控制台中看到任何错误吗？并删除所有*ngIf

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-help-popout',
  templateUrl: './help-popout.component.html',
  styleUrls: ['./help-popout.component.scss']
})
export class HelpPopoutComponent implements OnInit {

  isOpen: boolean;

  constructor() { }

  ngOnInit() {
  }

  close() {
    this.isOpen = false;
  }

}

<button id="open-btn" (click)="showHelpPopout = true"><img src="../../../assets/icons/notes_small_white.png"></button>

<app-help-popout (closePopout)="closePopout()" *ngIf="showHelpPopout"></app-help-popout>