我有两个组件,分别是“ 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;
}
}
我不确定为什么没有显示弹出窗口,有什么主意吗?
答案 0 :(得分: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>
这样,仅在单击按钮后,弹出组件才会加载。如果需要始终加载它(因为每次关闭它都会重新创建该组件,然后再次打开它),那么您可以应用您的方法并仅修正拼写错误。
最好的方法是在第一次单击按钮时加载组件,然后保持加载状态以允许切换(打开/关闭),而无需重新创建组件。