Angular 2 eventEmitter 不起作用答案

【问题标题】：Angular 2 eventEmitter dosen't workAngular 2 eventEmitter 不起作用
【发布时间】：2017-10-24 14:18:09
【问题描述】：

我需要做一些简单的事情，我想在单击帮助图标时显示一个对话框。

我有一个父组件：

@Component({
  selector: 'app-quotation',
  templateUrl: './quotation.component.html'
})
export class QuotationComponent implements OnInit {

  public quotation: any = {};
  public device: string;
  public isDataAvailable = false;

  @Output() showPopin: EventEmitter<string> = new EventEmitter<string>();

  constructor(private quotationService: QuotationService,
              private httpErrors: HttpErrorsService,
              private popinService: PopinService) {}

  moreInfo(content: string) {
      console.log('here');
    this.showPopin.emit('bla');
  }
}

还有他的html：

<ul>
    <li *ngFor="let item of quotation.HH_Summary_TariffPageDisplay[0].content">
        <label></label>
        <i class="quotation-popin" (click)="moreInfo()"></i>
        <div class="separator"></div>
    </li>
</ul>

我的popin组件：

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

  public popinTitle: string;
  public popinContent: string;
  public hidden: boolean = true;

  constructor() { }

  openPopin(event):void {
    console.log("here");
    this.hidden = false;
  }

}

他的 HTML：

<div class="card-block popin-container" (showPopin)="openPopin($event)" *ngIf="!hidden">
  <div class="card">
    <div class="popin-title">
      {{ popinTitle }}
      <i class="icon icon-azf-cancel"></i>
    </div>
    <div class="popin-content">
      {{ popinContent }}
    </div>
  </div>
</div>

我的父组件加载在路由器插座中，而我的 popin 加载在与路由器插座相同的级别，如下所示：

<app-nav-bar></app-nav-bar>
<app-breadcrumb></app-breadcrumb>
<div class="container">
  <router-outlet></router-outlet>
</div>

<app-popin></app-popin>

我的问题是 eventEmitter 不起作用，我不知道为什么，有人可以解释一下吗？

谢谢，

问候

【问题讨论】：

您是否遇到任何错误？另外 moreInfo(content: string) 接受字符串，你还没有传递任何东西
你读过：angular.io/docs/ts/latest/cookbook/…?

标签： javascript angular decorator eventemitter

【解决方案1】：

EventEmitters 仅适用于直接的父子组件关系。您与您在此处描述的组件没有这种关系。

在父子关系中，我们将在父模板中看到子组件元素。我们在您的示例中没有看到这一点。

你有两个选择：

重构以使用父子关系
使用服务进行通信

如果您选择选项 2，则服务应该只包含一个组件接下来调用的 observable，而另一个组件订阅该组件。

@Injectable()
export class PopinService {
  showPopin = new ReplaySubject<string>(1); 
}

在引用组件中注入这个并修改moreInfo

  moreInfo(content: string): void {
    this.popinService.showPopin.next('bla' + content);
  }

在 PopinComponent 中注入 popinService 并添加以下内容：

ngOnInit() {

  this.popinService.showPopin.subscribe(content => {
    this.hidden = false;
    this.popinContent = content;
  });

}

【讨论】：

非常感谢，我现在明白了，我真的不想不使用服务，但这是我使用的好方法

【解决方案2】：

这是因为你滥用它。

在您的 popin 组件中，您只需调用函数并记录日志，并将变量设置为 false。

而且我在任何地方都看不到您使用app-quotation 选择器，所以您并没有真正使用它，是吗？

【讨论】：

【解决方案3】：

看起来您正在向子组件 (popin) 发送输出。理想情况下，如果你给出的输出意味着它应该是从孩子到父母，从父母到孩子，那就是输入。

【讨论】：