如何在不刷新组件属性更改的整个页面的情况下更新 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() 接受所有组件中的属性名称。

个人信息.component.ts

          @Input() name:string;

个人信息.component.html

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

现在，因为将更改个人信息组件中的值，它会将其传递给所有组件，如果正在使用，它将在 DOM 中更新。