Angular - 构造函数和ngOnInit方法之间的延迟为10-12秒

Question

我遇到了一个奇怪的问题，它与组件创建和传递数据有关。

对于州议员，我正在使用：

• Angular CLI：1.6.4
• Angular：5.1.0

问题如下：在父组件中，我正在获取数据，创建DataService对象，将数据传递给服务，然后导航到子组件。我注意到，当数据（由* ngFor显示）10-12秒后，子组件的标题会立即显示。

父组件代码snipped负责导航（直到这一切似乎都没问题）：

navigateTo({ id, data }) {
    let component = '/d/';
    id = Utils.decodeString(id);

    this._data.changeMessage(data);
    this._router.navigate([component, id]);
}

getAllDataByProvince = async (provinceName) => {

    provinceName = Object.keys(ProvinceNames).filter(function (key) { return ProvinceNames[key] === provinceName })[0];

    let sensors = await this._polution.getAllDataBy<Province>(provinceName, new Province())
      .then(sensors => {
        this.navigateTo({ id: provinceName, data: sensors })
      })
      .catch(error => { throw Error(error) });
}

子组件：

export class DetailedViewPageComponent implements OnInit, AfterViewInit {
    data: string;

    constructor(private dataService: DataService) {
        console.log('timestamp - constructor', new Date().getTime());
    }

    ngOnInit() {
        this.dataService.currentMessage.subscribe(message => {
            console.log('timestamp - ngOnInit', new Date().getTime());
            console.log(message);
            this.data = message;
            console.log(this.data);
        });
    }

    ngAfterViewInit(): void {
        console.log('timestamp - ngAfterViewInit', new Date().getTime());
    }
}

子组件的HTML：

<h1>Details view</h1>
<input type="text" name="search" id="searchInputArea">
<ul>
    <li *ngFor="let item of data">
        <h3>
            {{item.name}}
        </h3>
        <p>{{ item.city.name }}</p>
        <ul>
            <li *ngFor="let sensor of item.sensors">{{ sensor.sensorId }}</li>
        </ul>
    </li>
</ul>

和DataService：

@Injectable()
export class DataService implements OnInit {
    private messageSource = new BehaviorSubject<string>("default message");
    currentMessage = this.messageSource.asObservable();

    constructor(private _router: Router) { }

    ngOnInit() { }

    changeMessage(message: any) {
        this.messageSource.next(message)
    }
}