具体场景如下:
父组件监听子组件通过 @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);
}
}
1
dong3580 2017-09-27 18:32:09 +08:00 via Android
套一层还是不要心累了,可怜一下我这套了很多层的还加了继承的可怜人吧,
|
2
crysislinux 2017-09-27 18:39:40 +08:00 via Android
所以你为什么要这么做,react 的 props 也是反对你修改的啊
|
3
fulvaz OP 不累了, 吃了个饭, 脑子清醒, 知道了是引用的问题
|