Question

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

我有一个父组件：

@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没有工作，我不知道为什么，有人可以解释我吗？

THX，

问候

Answer 1

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

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

您有两种选择：

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

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

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

在QuotationComponent中注入此内容并修改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;
  });

}

Answer 2

这是因为你滥用它。

在popin组件中，只需调用函数并执行日志，并将变量设置为false。

我无处可见，你可以看到你使用app-quotation选择器，所以你不能真正使用它，是吗？

Answer 3

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

Angular 2 eventEmitter选择了工作

3 个答案: