Angular EventEmitter未触发父组件方法问题排查

父组件包含<search-box>和<table-component>两个子组件，期望接收<search-box>通过EventEmitter传递的值，调用setBoolean方法更新布尔值，以此控制<table-component>的显示。目前子组件的emit()函数可正常执行，但父组件的setBoolean()方法完全没运行。

父组件原代码 #

@Component({
  selector: 'parent',
  template: `
<search-box  (emitter)="(setBoolean($event))"></search-box>
<table-component *ngIf="tableBoolean"></table-component>
`,
})
@Injectable({
  providedIn: 'root',
})
export class SearchComponent implements OnInit {
  tableBoolean = false;
  constructor() {
  }

  setBoolean(valueEmitted: any){
    this.tableBoolean = true;
    console.log(this.tableBoolean)
    console.log(valueEmitted)
  }
  ngOnInit(): void {
  }
}

search-box子组件原代码 #

@Component({
  selector: 'search-box',
  templateUrl: './search-box.component.html',
  styleUrls: ['./search-box.component.css']
})
export class SearchBoxComponent implements OnInit {
  @Output() emitter = new EventEmitter<string>();
  constructor(private _renderer2: Renderer2,
    @Inject(DOCUMENT) private _document: Document) {
  }
  emit(){
    this.emitter.emit("TEST");
  }

  ngOnInit(): void {
    let script = this._renderer2.createElement('script');
    script.src = urls.prod;
    this._renderer2.appendChild(this._document.body, script);
  }
}

问题原因及解决方案 #

1. 事件绑定语法错误 #

父组件模板里的事件绑定多了一层冗余括号：

(emitter)="(setBoolean($event))"

这会导致Angular无法正确解析并调用setBoolean方法，正确的写法应该去掉外层括号：

(emitter)="setBoolean($event)"

2. 错误添加@Injectable装饰器 #

组件类不需要@Injectable装饰器，这个装饰器是给服务类用的。给组件添加@Injectable会导致组件的实例化逻辑异常，进而影响方法的正常调用，必须移除这部分代码。

修正后的父组件代码 #

@Component({
  selector: 'parent',
  template: `
<search-box  (emitter)="setBoolean($event)"></search-box>
<table-component *ngIf="tableBoolean"></table-component>
`,
})
export class SearchComponent implements OnInit {
  tableBoolean = false;
  constructor() {
  }

  setBoolean(valueEmitted: any){
    this.tableBoolean = true;
    console.log(this.tableBoolean)
    console.log(valueEmitted)
  }
  ngOnInit(): void {
  }
}

做以上两处修改后，父组件的setBoolean方法就能正常被触发，tableBoolean值会更新，<table-component>也会随之显示。

内容的提问来源于stack exchange，提问作者JosephLiCodes