最近写 angular, 心累

2017-09-27 18:16:16 +08:00
 fulvaz

具体场景如下:

父组件监听子组件通过 @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);
  }
}
2005 次点击
所在节点    问与答
3 条回复
dong3580
2017-09-27 18:32:09 +08:00
套一层还是不要心累了,可怜一下我这套了很多层的还加了继承的可怜人吧,
crysislinux
2017-09-27 18:39:40 +08:00
所以你为什么要这么做,react 的 props 也是反对你修改的啊
fulvaz
2017-09-27 19:07:04 +08:00
不累了, 吃了个饭, 脑子清醒, 知道了是引用的问题

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/394121

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX