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

Question

我的页面结构是：

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

我有单个JSON，其中包含个人信息和多个具有共同字段“名称”的地址。

如何在更改一个组件的“名称”字段时更新/刷新所有地址组件，而无需刷新整个页面？

Answer 1

您可以使用角度中的双向数据绑定来实现它。 随着双向属性值的变化，它将更新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（）接受所有组件中的属性名称。

个人information.component.ts

          @Input() name:string;

个人information.component.html

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

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