最近写 angular, 心累

具体场景如下:

父组件监听子组件通过 @Output 触发的某个事件, 这个事件会在子组件成员 val 变化时触发, val 有 @Input 修饰器, 父组件可以向 val 传值, 代码中 val 绑定了 parentVal

在事件触发时, 父组件的处理函数修改 parentVal(代码中是一直设置为 false)

问题: 正常来说, 子组件的 val 应该与 parentVal 保持一致, 然而, 并没有, parentVal 的修改被丢弃了.

心累.

双向绑定貌似可以绕过, 但是还是心累.

代码如下:

父组件代码:

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

@Component({
  selector: 'app-root',
  template: `<app-childc [val]="parentVal" (valChange)="onChildValChange($event)"></app-childc>`,
})
export class AppComponent {
  title = 'app';
  parentVal = false;

  onChildValChange() {
    console.log('parent handle change event');
    this.parentVal = false;
  }
}

子组件代码:

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

@Component({
  selector: 'app-childc',
  template: `
    <p>child content: {{val}}</p>
    <button (click)="onClick()">Click me</button>
  `,
})
export class ChildcComponent implements OnInit {
  @Input() val = false;
  @Output() valChange = new EventEmitter();

  constructor() { }

  ngOnInit() {
  }

  onClick() {
    console.log('child click');
    this.val = !this.val;
    this.valChange.emit(this.val);
  }
}