Значение службы не является постоянным между родительским компонентом и дочерним компонентом - PullRequest
Новая
       4

Значение службы не является постоянным между родительским компонентом и дочерним компонентом

0 голосов
/ 06 февраля 2020

Я пытаюсь установить значение в сервисе из одного компонента и прочитать его из другого.

Иерархия моих компонентов выглядит следующим образом: parent => child => grandchild

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

Ниже приведен код:

service.ts 

 @Injectable()
    export class ConfirmationDialogService {
        componentHasDirtyForm: boolean;// value to set
        constructor(private confirmationDialogReferenceService: ConfirmationDialogReferenceService,
                    private dialog: MatDialog) { }

parentComponent.ts 

constructor(private confirmService: ConfirmationDialogService) {
}

ngOnInit() {
}

isDirty(): boolean {
    console.log(this.confirmService.componentHasDirtyForm)
    return this.confirmService.componentHasDirtyForm;
}

ChildComponent.ts 

constructor(private confirmService: ConfirmationDialogService) { }

ngAfterViewChecked(){
    this.confirmService.componentHasDirtyForm = this.generalInfoForm.dirty;
}

GrandchildComponent (отображается внутри дочернего компонента) 

constructor(private confirmationService: ConfirmationDialogService) { }
    ngAfterViewChecked(){
        this.checkForDirtyForm();
    }

    checkForDirtyForm(){
        for(var i = 0; i < this.ContactFormArr.length; i++){
            if(this.ContactFormArr.at(i).dirty){
                this.confirmationService.componentHasDirtyForm = true;
                break;
            }
        }
    }

В основном, в компоненте внука я пытаюсь установить для свойства componentHasDirtyForm ConfirmationDialogService. Это правильно читается в родительском, если я установил это от ребенка, но не внука.

Я включил службу в качестве поставщика в app.module.ts

Ответы [ 3 ]

0 голосов
/ 06 февраля 2020

Вы должны обернуть componentHasDirtyForm внутри вашего сервиса как наблюдаемый, а затем связать его со всеми вашими компонентами (родительский, дочерний, внучатый). Таким образом, все три (или более) все время имеют одно и то же значение. 

// service
private readonly _componentHasDirtyForm = new BehaviorSubject<any>({});
public readonly $componentHasDirtyForm = this._data.asObservable();

// component
public componentHasDirtyForm: Observable<any>;

ngAfterViewChecked() {
   this.componentHasDirtyForm = confirmationService.$componentHasDirtyForm;
}    

// template
<div>{{ componentHasDirtyForm | async }}</div>
0 голосов
/ 19 февраля 2020

Мне удалось найти проблему. Компоненты «Внуки / Дети» правильно устанавливали значение службы. Проблема заключалась в том, что хук родительского / дочернего компонента ngAfterViewChecked() запускался после хуков в внуках / детях.

Это приводило к тому, что значение службы в основном всегда отражало статус родительских компонентов (компонент выше в цепь). Я обошел проблему, установив грязную проверку в родительском компоненте, чтобы условно изменить сервис в зависимости от его текущего значения.

Например 

isDirty(): boolean {
    if(!this.confirmService.componentHasDirtyForm)
        this.confirmService.componentHasDirtyForm = formStatus;
}
0 голосов
/ 06 февраля 2020

если ваш сервис объявлен как 

@Injectable(
{
  provide:root
})

(это комментарий Wand Maker), сервис является общим для всех приложений

Иначе, вы объявляете сервис как провайдера: [] в основной модуль (и сервис является общим для всех приложений) или объявить как провайдеры: [] в модуле ведьма имеет все компоненты.

Если вы объявляете сервис как провайдер каждого компонента или внедряете с помощью Injector Служба отличается для каждого компонента

...