最近写 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); } }