Как обновить DOM без обновления полной страницы об изменениях свойств компонента

Question

Структура моей страницы:

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

У меня есть один JSON с личной информацией и несколько адресов с общим полем 'name'.

Как мне обновить / обновить всекомпонент адреса, при изменении поля имени одного компонента, без обновления всей страницы?

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 ().

personal-information.component.ts

          @Input() name:string;

personal-information.component.html

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

Теперь, когда изменится значение в компоненте персональной информации, оно передаст его во все компоненты и будет обновлено в DOM, если оно используется.