Блог

У меня есть компонент с одним дочерним компонентом, к которому я не могу получить доступ и изменить код. Чтобы что-то работало, мне нужно получить доступ к переменной внутри дочернего компонента в начале родительского компонента, однако дочерний компонент всегда опаздывает. Есть ли способ для меня подписаться на переменную (я пробовал с RxJS, однако мне не повезло, может быть, я просто сделал что-то не так). Я использовал дочерний элемент представления, и я могу получить доступ к переменной позже, однако в OnInit она все еще не определена, есть ли способ дождаться ее внутри OnInit, а затем вызвать остальные функции?

 @ViewChild("test") test;
 ngOnInit() {
    
    // console.log(this.test.model.test1);
    // const subject = new BehaviorSubject(this.test.model.test1);
    // subject.subscribe(console.log);
    
    // this.test.model.test1.toPromise().then(res => {console.log(res)});
  }
 

Вы можете читать дочерние данные только после проверки представления, поэтому используйте ngAfterViewInit вместо ngOnInit .

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

Твоя проблема:

Дочерний компонент будет инициализирован только после того, как шаблон вашего родительского компонента будет инициализирован, как упоминалось в @kvetis. Поэтому самое раннее, чего вы можете ожидать от своего ребенка,- это то, что происходит с вашими родителями afterViewInit() в течение жизненного цикла.

Общая коммуникация между ребенком и родителем

Как правило, вы используете @Output декоратор для свойства childs, которое затем может выдавать либо событие, либо значение (которое rxjs может присоединиться к изображению). И привязать к этому выходу в шаблоне ваших родителей:

ребенок.тс

 ...

@Output
_model = new Subject<MyModelType>();

...

ngOnInit() {
  someLogic();
  this.model.next(whatEver);
}
...
 

parent.html

 ...
<child-selector (_model)="handleChildValue($event)">
...
 

родитель.ts

 ...

handleChildValue(model: MyModelType) {
  doStuffWithModel();
}

...
 

В качестве альтернативы вы можете использовать EventEmitter вместо a Subject .