Question

事件发射器在Angular 4中不起作用。我从教程中获得了实现。如果还有其他方法可以帮到我，请建议我。

下面描述的发射机组件。

.HTML

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" 
        type="button" (click)="toggleClass()">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">muyal</a>
</nav>

.TS

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})

export class HeaderComponent {
  @Output() emitClass = new EventEmitter<boolean>();
  menuShow = false;

  toggleClass() {
   this.emitClass.emit(this.menuShow);
   this.menuShow = !this.menuShow
  }
}

下面描述的接收器组件.Event发射器在Angular 4中不起作用。我从教程中获得了实现。如果还有其他方法可以帮到我，请建议我。

.HTML

<app-welcome (emitClass)="emitClass($event)"></app-welcome>

.TS

 import { Component, OnInit } from '@angular/core';

 @Component({
   selector: 'app-welcome',
   templateUrl: './welcome.component.html',
   styleUrls: ['./welcome.component.css']
 })

  export class WelcomeComponent  {
    menuShow:boolean = false;
    emitClass(agreed: boolean) {
    this.menuShow = agreed;
  }
 }

Answer 1

查看您的代码，app-header组件发出的事件不是app-welcome组件，而是将emitClass事件放入监听状态。我认为做以下事情将解决您的问题

<app-welcome>
   <app-header (emitClass)="emitClass($event)"></app-header>
</app-welcome>

我假设app-welcome是顶级组件，app-header组件中使用了app-welcome，并且您还正确导入了app-header组件。

组件之间的通信 - 发射器不在Angular中工作

1 个答案: