Angular 恢复组件上的单向数据绑定

Block1和Block2都是相同的组件“

hello.component.ts

”（重用组件） 从块1输入框更新的任何数据都应反映在块2输入框上

但是从块2更新到块1的数据不应更新

数据应该单向更新，没有多方向更新

目前数据更新是多方向的，很难解决这个问题

请给出简短的解答

您可以看到它是“多向的”，因为您将相同的对象引用传递给两个组件

将其替换为一个简单字符串并使用输入/输出，如下所示：

// hello.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'hello',
  template: `
  <input type="text" [ngModel]="name" (ngModelChange)="updateName($event)" />
  <h1>Hello {{name}}!</h1>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: any;
  @Output() nameChanged: EventEmitter<string> = new EventEmitter();

  updateName(name: string): void {
    this.name = name;
    this.nameChanged.emit(name);
  }
}

// app.component.html
<p> Block1</p>
<hello [name]="name" (nameChanged)="name = $event"></hello>
<p> Block2</p>
<hello [name]="name"></hello>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
}

//hello.component.ts
从“@angular/core”导入{Component，Input，Output，EventEmitter}；
@组成部分({
选择器：“你好”，
模板：`
你好{{name}}！
`,
样式：[`h1{font-family:Lato；}`]
})
导出类HelloComponent{
@Input（）名称：任意；
@输出（）名称已更改：EventEmitter=新的EventEmitter（）；
updateName（名称：字符串）：void{
this.name=名称；
this.nameChanged.emit（name）；
}
}
//app.component.html
区块1

区块2

//app.component.ts
从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
名称='角度'；
}