Angular 2 输入文件更改值 - HTML

在Angular 2中，我们可以使用输入属性将数据从父组件传递到子组件。但是，当我们需要更改传递值时，我们需要使用ngOnChanges生命周期钩子和Input修饰符来实现。

在这个例子中，我们将展示如何使用HTML模板和组件类来更改输入文件的值，并在页面上显示最新的值。

代码实现

首先，在父组件中定义一个文件对象，并将其传递给子组件。

<!-- 父组件 HTML 模板 -->
<app-child [item]="file"></app-child>

// 父组件 TypeScript 类

export class ParentComponent {
  file = {
    filename: "myfile.txt",
    content: "Hello World!"
  };
}

接下来，在子组件中，我们需要使用@Input修饰符来接收父组件传递的文件对象，并在子组件中对其进行更改。

// 子组件 TypeScript 类

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

@Component({
  selector: 'app-child',
  template: `
    <div>
      <h2>{{ item.filename }}</h2>
      <textarea [(ngModel)]="item.content"></textarea>
    </div>
  `
})
export class ChildComponent implements OnChanges {
  @Input() item: { filename: string, content: string };

  ngOnChanges(changes: SimpleChanges) {
    if (changes.item) {
      console.log("New file content: " + changes.item.currentValue.content);
    }
  }
}

在子组件的HTML模板中，我们展示文件的名称和内容，并使用[(ngModel)]指令来实现双向绑定，使得用户可以更改文件的内容。

同时，我们在子组件的代码中监听文件对象的更改，并在控制台中输出最新的文件内容。

运行结果

当我们更改文件内容时，控制台会输出最新的文件内容。

总结

在Angular 2中，我们可以使用输入属性将数据从父组件传递到子组件，并使用ngOnChanges生命周期钩子和Input修饰符来实现更改传递值的功能。本例中展示了如何使用HTML模板和组件类来更改输入文件的值，并在页面上显示最新的值。