Angular2: Ожидание инициализации службы

Question

Есть ли способ подождать, прежде чем служба инициализирует загрузку других компонентов? Мне нужно загрузить некоторые данные синхронно, прежде чем отображать компоненты (которые требуют данных), и я не хочу использовать обещания/наблюдаемые данные (используя их для асинхронных вызовов)

ngIf, похоже, не режет (компоненты, даже если они не совпадают).

Я не использую маршрутизатор (не нужно его для приложения), поэтому я не думаю, что @CanActivate подходит в этом случае.

Любые идеи?

@Component({ 
    selector: 'my-app', 
    directives: [MyDirective], 
    template: ` 
    <div> 
     <div *ngIf="!initialized">Loading...</div> 
     <div *ngIf="initialized"><myDirective>should wait for service to be initialized</myDirective></div> 
    </div>` 
}) 
export class AppComponent { 
    initialized = false; 

    constructor(_myService: MyService) { 
     this._myService = _myService; 
    } 

    ngOnInit() { 
     this._myService.init() 
      .then(() => { 
       setTimeout(() => this.initialized = true, 2000); 
      } 
     ); 
    } 
} 

Answer 1

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

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

Надеюсь, это помогло.

Answer 2

Какая версия Углового у вас есть? Не уверен, что вы копируете код с измененным кодом, но похоже, что в вашем классе отсутствует ключевое слово implements.

*ngIf хорошо работает в этом plunker.

Из того, что я собираю, что-то вроде * ngIf - это правильный способ сделать что-то в Ng2. В принципе, показывать только компонент, если условия хорошие.

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

Возможно, это связано с тем, что ваш компонент (или шаблон) ожидает некоторые значения, но их там нет (так что ваш constructor ломается).

Согласно Lifecycle Hooks страницам angular.io, это именно то, для чего предназначен интерфейс OnInit.

---

Вот код из plunker непосредственно (ваш будет субкомпоненту):

import {Component, OnInit} from 'angular2/core' 

@Component({ 
    selector: 'sub-component', 
    template: '<p>Subcomponent is alive!</p>' 
}) 
class SubComponent {} 


@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 

     <div *ngIf="initialized"> 
     Initialized 
     <sub-component>Sub</sub-component> 
     </div> 
     <div *ngIf="!initialized">Not initialized</div> 
    </div> 
    `, 
    directives: [SubComponent] 
}) 
export class App implements OnInit { 
    initialized = false; 
    constructor() { 
    this.name = 'Angular2' 

    } 
    ngOnInit() { 

    setTimeout(() => { 
     this.initialized = true; 
    }, 2000) 
    } 
}