Angular双向绑定简单理解

在使用Antd的时候，一直很好奇里面的双向绑定的自定义组件是怎么做的。

因为之前一直用，没有去细看文档。

今天抽空来简单的撸一下。

在ng中，()是单向数据流，从视图目标到数据源，[()]这样就是双向绑定了。简单的说就是ng给的一个语法糖，帮我们做了子组件内部事件发射的事件监听，然后赋值。

子组件：html

<input placeholder="test" type="text" [(ngModel)]="qc" #qq (ngModelChange)="testevent()">

子组件:ts

@Component({

  selector: 'app-qingcheng',

  templateUrl: './qingcheng.component.html',

  styleUrls: ['./qingcheng.component.less']

})

export class QingchengComponent implements OnInit {

  @Input() username: string;

  @Output() usernameChange = new EventEmitter();

  constructor() { }

  ngOnInit() {

  }

  testevent() {

    console.log(this.username);

    this.usernameChange.emit(this.username);

  }

}

向外部发射事件的时候，一定要xxxChange，以Change结尾的事件才正确，不然无法双向绑定。。

这个坑找了半天才解决：https://segmentfault.com/a/1190000016651999

父组件：html

<app-qingcheng #qingcheng  [(qc)]="testbind"></app-qingcheng>

{{testbind}}

父组件：ts

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.less']

})

export class AppComponent {

  title = 'qctest';

  testbind = '';

}

巴特西

Angular双向绑定简单理解

最新文章

热门文章