加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angular – @Input:双向数据绑定不起作用

发布时间:2020-12-17 10:17:54 所属栏目:安全 来源:网络整理
导读:我试图复制这个: http://plnkr.co/edit/OB2YTMJyeY3h9FOaztak?p=preview(这个plunker是有效的例子,我希望得到相同的结果,但我的代码,这是行不通的) ================================================== ================ 我有这个简单的双向绑定,我正在尝
我试图复制这个: http://plnkr.co/edit/OB2YTMJyeY3h9FOaztak?p=preview(这个plunker是有效的例子,我希望得到相同的结果,但我的代码,这是行不通的)

================================================== ================

我有这个简单的双向绑定,我正在尝试更新父类和子节点上的字符串属性

问题:当单击“从父级更新”时,两个绑定都会更新.但是当点击“从孩子更新”时,只有孩子更新!

这看起来很简单,我可以做错什么?

(注意:我使用了角度CLI来运行项目)

================================================== ================

父组件:

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

@Component({
  selector: 'app-my-dad',templateUrl: './my-dad.component.html',styleUrls: ['./my-dad.component.css']
})
export class MyDadComponent {

  parentModel: string;

  constructor() {}

  updateModel(){
    this.parentModel += ' parent';
  }
}

父模板

<h2>Parent: {{ parentModel }} </h2> 
<button (click)="updateModel()"> update from parent </button>

<app-my-child [(model)]="parentModel"></app-my-child>

儿童组件

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

@Component({
  selector: 'app-my-child',templateUrl: './my-child.component.html',styleUrls: ['./my-child.component.css']
})
export class MyChildComponent {

  @Input() model: string;

  constructor() { }

  updateModel(){
    this.model += ' child';
  }
}

儿童模板:

<h2>Child: {{ model }} </h2>
<button (click)="updateModel()"> update from child </button>
对于使用[(xxx)](banana-in-a-box)语法的双向绑定,您需要和@Input()以及匹配名称的@Output()
@Input() myProp:String;
@Output() myPropChange:EventEmitter<String> = new EventEmitter<String>;

另见https://angular.io/docs/dart/latest/guide/template-syntax.html#!#two-way

要使用ngModel进行双向绑定,您的组件需要实现ControlValueAccessor

也可以看看

> https://angular.io/docs/ts/latest/api/forms/index/NgModel-directive.html
> https://github.com/angular/angular/issues/11073#issuecomment-242563788

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读