Question

我有两个组件，分别是“ app-new-employees-header”和“ app-help-popout”。当我单击“ app-new-employees-header”上的按钮时，我想显示“ app-help-popout”。目前，即使没有任何按钮单击功能，我也看不到“ app-help-popout”。

这是我的代码

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>

app-help-popout.html

<button id="open-btn" *ngIf="!isOpen" (click)="isOpen = true"><img src="../../../assets/icons/notes_small_white.png"></button>
<div *ngIf="isOpen" id="feedback-window">
  <div id="wrapper">
    <button id="close-btn" (click)="isOpen = false"><img src="../../../assets/icons/close(old).png"></button>
    <h3>Help</h3>
    <div class="content">
      <div class="existingFeedback">
        <label>Your previous feedback</label>
      </div>
      <div id="notes-container">
        <label>My notes</label>
        <textarea placeholder="Add notes here"></textarea>
        <button class="main" (click)="close()"> close </button>
      </div>
    </div>
  </div>
</div>

app-help-popout.ts

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

}

我不确定为什么没有显示弹出窗口，有什么主意吗？

Answer 1

首先，您在<app-help-popout ></app-help-popout>中输入空格，这就是为什么您甚至都无法从弹出窗口中看到按钮的原因。

有一个更好的方法来解决这个问题。使用您的方法，即使您不单击按钮，也始终会加载弹出组件，它将被加载。

您可以做的是将负责打开组件的按钮移至app-new-employees-header，然后使用Output()处理关闭

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

这样，仅在单击按钮后，弹出组件才会加载。如果需要始终加载它（因为每次关闭它都会重新创建该组件，然后再次打开它），那么您可以应用您的方法并仅修正拼写错误。

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

单击显示嵌入式组件

1 个答案: