如何在不刷新组件属性更改的整页的情况下更新 DOM

Question

我的页面结构为：

<app-header></app-header>
<personal-information></personal-information>
<address></address>  // multiple address for loop
<app-footer></app-footer>

我有一个包含个人信息的 JSON 和多个包含公共字段"名称"的地址。

如何在不刷新整个页面的情况下更新/刷新所有地址组件，在更改一个组件"名称"字段时？

Answer 1

您可以使用 angular 中的双向数据绑定来实现它。当双向属性的值发生变化时，它将更新 DOM 中组件的相应模板的值。

demo.component.html
<app-header [name]="model.name"></app-header>
<personal-information ></personal-information>
<address [name]="model.name"></address>  // multiple address for loop
<app-footer [name]="model.name"></app-footer>
demo.component.ts
demoFn(){
model.name="Joe"
}

名称值"Joe"将传递给所有组件，您必须使用 @Input() 接受所有组件中的属性名称。

个人信息.组件.ts

@Input() name:string;

个人信息组件.html

<input [(ngModel)]="name" />

现在，随着个人信息组件中的值的更改，它会将其传递到所有组件中，并且如果正在使用它，它将在 DOM 中更新。