Угловой 5Компоненты, кажется, выполняются перед компонентом заголовка

Question

У меня есть вопрос, аналогичный угловой загрузке маршрутизатора до компонента заголовка, как это предотвратить? ... У меня есть сервис locationService.ts, headerComponent, который импортирует и внедряет службу и устанавливает значенияк объекту, определенному в locationService ... locationService.locationStatus.У меня также есть homeComponent, который импортирует и внедряет locationService.Однако locationService не определен, когда console.log его из конструктора в ngOnInit.Мне нужно проверить значение, установленное в заголовке, прежде чем отобразить HTML ... Я использую * ngIf, чтобы включить / выключить div в home.component.html в зависимости от значения, установленного в headerComponent.Моя структура выглядит следующим образом:

app.compnent.html

<custom-header></custom-header>

<router-outlet></router-outlet>

<custom-footer></custom-footer>

header.component.ts

....
...
import { LocationService } from '../locations/locations';
....
....
constructor(
   .....
    public locationService: LocationService,
   ......){
           this.setLocationStatus()
         }

.....
.....
setLocationStatus(){
       this.locationService.getStatus((data) => {
       .....
       ....
       this.locationService.locationStatus = data.status
       .....
       ...
     }

home.component.ts

.....
 import { LocationService } from '../locations/locations';
    ....
    ....

    activeLocation: boolean = false;
    constructor(
       .....
        public locationService: LocationService,
       ......){
         console.log(this.locationService.locationStatus)  <<<<< undefined
              }
     ngOinit(){
              this.activeLocation =
              this.locationService.locationStatus <<<<<undefined error
             }

Похоже, что homeComponent выполняется перед headerComponent ??Если это так, как я могу добиться того, что мне нужно сделать, это установить значение в заголовке и получить к нему доступ homeComponent .... Есть ли альтернативный способ сделать это.

Answer 1

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

если вам нужно что-то решить, прежде чем вы достигнете определенного компонента (маршрута), вам следует использовать средства определения маршрута. и в этом преобразователе вы можете внедрить службу, которую вы пытаетесь запустить, в компоненте заголовка. в то же время вы можете вернуть данные / которые вы хотите использовать в качестве решающего фактора для *ngIf.

Пожалуйста, прочитайте больше о угловых резольверах здесь