Как передать данные ngModel из сервиса в родительский компонент и показать их в маршрутизируемом дочернем компоненте - PullRequest
Новая
       30

Как передать данные ngModel из сервиса в родительский компонент и показать их в маршрутизируемом дочернем компоненте

0 голосов
/ 29 января 2020

Я хотел бы получить данные от пользователя и применить их в двух разных шаблонах. Для этого я создал поле ввода в app.component, который является родительским компонентом, и передал значение ввода как в template1.component, так и в template2.component. После ввода значения в поле ввода оно не обновляется в дочерних компонентах.

Обновляется, когда я пытаюсь показать значение в родительском компоненте.

Глобальная служба: 

export class GlobalsService { 
constructor() { }
maintitle = 'Default Title';
}

Компонент приложения HTML: 

<input [(ngModel)]='updatedtitle' />

<p>App Title is {{updatedtitle}}</p>

<a routerLink="template1">Template 1</a>
<a routerLink="template2">Template 2</a>

<router-outlet></router-outlet>

Компонент приложения TS: 

import { GlobalsService } from './common/globals.service';

export class AppComponent {
updatedtitle = '';
constructor(private _globalservice: GlobalsService) { }
ngOnInit() {
this.updatedtitle = this._globalservice.maintitle;
}
}

Компонент Template1 HTML: 

<p>Template 1 updated title is : {{updatedtitle}}</p>

Компонент Template1 TS: 

export class Template1Component{
template1title = "";
constructor(private _globalservice: GlobalsService) { }
ngOnInit() {
this.template1title = this._globalservice.maintitle;
}
}
...