V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
fulvaz
V2EX  ›  问与答

最近写 angular, 心累

  •  
  •   fulvaz · 2017-09-27 18:16:16 +08:00 · 2002 次点击
    这是一个创建于 2604 天前的主题,其中的信息可能已经有所发展或是发生改变。

    具体场景如下:

    父组件监听子组件通过 @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);
      }
    }
    
    3 条回复    2017-09-27 19:07:04 +08:00
    dong3580
        1
    dong3580  
       2017-09-27 18:32:09 +08:00 via Android
    套一层还是不要心累了,可怜一下我这套了很多层的还加了继承的可怜人吧,
    crysislinux
        2
    crysislinux  
       2017-09-27 18:39:40 +08:00 via Android
    所以你为什么要这么做,react 的 props 也是反对你修改的啊
    fulvaz
        3
    fulvaz  
    OP
       2017-09-27 19:07:04 +08:00
    不累了, 吃了个饭, 脑子清醒, 知道了是引用的问题
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3548 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 10:46 · PVG 18:46 · LAX 02:46 · JFK 05:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.