Question

我设计了一个弹出组件，它旨在通过调用以下方法来显示和隐藏设置后退和前变量它的类是必然的。

hide() {
  this.back = this.back.replace(/[ ]?shown/, "");
  this.front = this.front.replace(/[ ]?shown/, "");
}

show() {
  this.back += "shown";
  this.front += "shown";
}

问题是我希望弹出窗口可以从其他组件调用，而不是它们的一部分。事实上，我瞄准的应用程序的标记如下。

<navbar></navbar>
<sidebar></sidebar>
<filter></filter>
<poppy></poppy>

但是，我不确定如何调用它。我对导航栏中的点击作出反应并检测到该请求应该触发弹出窗口弹出。

if(notImplementedYet) {
  ???
}

我已经搜索了这个问题，但我并没有真正清楚地了解接近它的正确方法。例如，我已经看到了关于Input和Output here的内容，但我无法判断它是否适用于我的需求。

我也看到了this，但它并没有告诉我太多，可能是由于缺乏Angular的经验。此外，我担心父母对孩子/孩子对父母的方法会导致非常讨厌的调用结构。

Answer 1

您可以在要从中调用弹出窗口的组件中使用@Output。然后，您可以简单地使用模板变量来调用弹出组件中的show或hide方法。

例如，您可以通过代码点击导航栏来显示弹出窗口：

import { Component, Output, EventEmitter } from '@angular/core';
@Component({
    selector: 'navbar',
    templateUrl: './nav-bar.component.html'
})
export class NavComponent {
    @Output() onClickNav: EventEmitter<any> = new EventEmitter(); 
    onClick():void {
        this.onClickNav.emit(null);
    }
}

<navbar (onClickNav)="popup.show()"></navbar>
<poppy #popup ></poppy>

Answer 2

您可能正在寻找ViewChild。

基本上你可以实例引用子组件的ViewChild变量然后你可以调用它的方法。

Angular 2中的组件如何通过调用其方法弹出另一个组件？

2 个答案: