Question

我的父组件

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制作了一些互动示例如您所见，仅更新子组件而不更新父组件。

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

0 个答案: