@input类型字符串属性,用于双向数据绑定

时间:2018-09-24 12:39:24

标签: angular angular6

我的父组件

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

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
})
export class FormComponent implements OnInit {

  constructor() { }

  from = 'foo'
}
<div class="form">

  <app-text-field [value]="from" [label]="'Label'"></app-text-field>
        
</div>

还有一个

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

@Component({
  selector: 'app-text-field',
  templateUrl: './text-field.component.html'
})
export class TextFieldComponent implements OnInit {

  constructor() { }
  
  @Input() value: string;
  @Input() label: string = '';

  ngOnInit() {
  }

}
<div class="input">
  <span class="input__name">{{label}}</span>
  <input class="input__input"
    type="text"
    [(ngModel)]="value" />
</div>

当我在文本字段中键入内容时,它不会更新我的值。 ngModel可以与@Input string属性一起使用,还是只能与本教程https://angular.io/tutorial/toh-pt3这样的对象一起正确使用?

我根据本教程https://stackblitz.com/edit/angular-wd69qf制作了一些互动示例 如您所见,仅更新子组件而不更新父组件。

0 个答案:

没有答案