Angular2: Làm thế nào để tải dữ liệu trước khi kết xuất thành phần?

Tôi đang cố tải một sự kiện từ API của mình trước khi thành phần được hiển thị. Hiện tại tôi đang sử dụng dịch vụ API mà tôi gọi từ chức năng ngOnInit của thành phần.

EventRegisterThành phần của tôi :

import {Component, OnInit, ElementRef} from "angular2/core";
import {ApiService} from "../../services/api.service";
import {EventModel} from '../../models/EventModel';
import {Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig, RouteParams, RouterLink} from 'angular2/router';
import {FORM_PROVIDERS, FORM_DIRECTIVES, Control} from 'angular2/common';

@Component({
    selector: "register",
    templateUrl: "/events/register"
    // provider array is added in parent component
})

export class EventRegister implements OnInit {
    eventId: string;
    ev: EventModel;

    constructor(private _apiService: ApiService, 
                        params: RouteParams) {
        this.eventId = params.get('id');
    }

    fetchEvent(): void {
        this._apiService.get.event(this.eventId).then(event => {
            this.ev = event;
            console.log(event); // Has a value
            console.log(this.ev); // Has a value
        });
    }

    ngOnInit() {
        this.fetchEvent();
        console.log(this.ev); // Has NO value
    }
}

EventRegisterMẫu của tôi

<register>
    Hi this sentence is always visible, even if `ev property` is not loaded yet    
    <div *ngIf="ev">
        I should be visible as soon the `ev property` is loaded. Currently I am never shown.
        <span>{{event.id }}</span>
    </div>
</register>

Dịch vụ API của tôi

import "rxjs/Rx"
import {Http} from "angular2/http";
import {Injectable} from "angular2/core";
import {EventModel} from '../models/EventModel';

@Injectable()
export class ApiService {
    constructor(private http: Http) { }
    get = {
        event: (eventId: string): Promise<EventModel> => {
            return this.http.get("api/events/" + eventId).map(response => {
                return response.json(); // Has a value
            }).toPromise();
        }     
    }     
}

Thành phần được kết xuất trước khi lệnh gọi API trong ngOnInithàm được thực hiện tìm nạp dữ liệu. Vì vậy, tôi không bao giờ có thể nhìn thấy id sự kiện trong mẫu xem của tôi. Vì vậy, có vẻ như đây là một vấn đề ASYNC. Tôi dự kiến ​​ràng buộc của ev( EventRegisterthành phần) để thực hiện một số công việc sau khi thuộc evtính được thiết lập. Đáng buồn thay, nó không hiển thị divđược đánh dấu *ngIf="ev"khi tài sản được thiết lập.

Câu hỏi: Tôi có đang sử dụng một cách tiếp cận tốt? Nếu không; Cách tốt nhất để tải dữ liệu trước khi thành phần bắt đầu kết xuất là gì?

LƯU Ý: Cách ngOnInittiếp cận được sử dụng trong hướng dẫn angular2 này .

BIÊN TẬP:

Hai giải pháp có thể. Đầu tiên là bỏ qua fetchEventvà chỉ sử dụng dịch vụ API trong ngOnInithàm.

ngOnInit() {
    this._apiService.get.event(this.eventId).then(event => this.ev = event);
}

Giải pháp thứ hai. Giống như câu trả lời được đưa ra.

fetchEvent(): Promise<EventModel> {
    return this._apiService.get.event(this.eventId);
}

ngOnInit() {
    this.fetchEvent().then(event => this.ev = event);
}

cập nhật

• Nếu bạn sử dụng bộ định tuyến, bạn có thể sử dụng móc hoặc bộ giải quyết vòng đời để trì hoãn điều hướng cho đến khi dữ liệu đến. https://angular.io/guide/router#milestone-5-route-guards

• Để tải dữ liệu trước khi kết xuất ban đầu của thành phần gốc APP_INITIALIZERcó thể được sử dụng Cách truyền tham số được kết xuất từ ​​phụ trợ sang phương thức bootstrap angular2

nguyên

Khi console.log(this.ev)được thực hiện sau this.fetchEvent();, điều này không có nghĩa là fetchEvent()cuộc gọi được thực hiện, điều này chỉ có nghĩa là nó được lên lịch. Khi console.log(this.ev)được thực thi, cuộc gọi đến máy chủ thậm chí không được thực hiện và tất nhiên vẫn chưa trả về giá trị.

Thay đổi fetchEvent()để trả lại mộtPromise

 fetchEvent(){
    return  this._apiService.get.event(this.eventId).then(event => {
        this.ev = event;
        console.log(event); // Has a value
        console.log(this.ev); // Has a value
    });
 }

thay đổi ngOnInit()để chờ Promisehoàn thành

ngOnInit() {
    this.fetchEvent().then(() =>
    console.log(this.ev)); // Now has value;
}

Điều này thực sự sẽ không mua cho bạn nhiều cho trường hợp sử dụng của bạn.

Đề xuất của tôi: Gói toàn bộ mẫu của bạn trong một <div *ngIf="isDataAvailable"> (template content) </div>

và trong ngOnInit()

isDataAvailable:boolean = false;

ngOnInit() {
    this.fetchEvent().then(() =>
    this.isDataAvailable = true); // Now has value;
}

Một giải pháp hay mà tôi đã tìm thấy là thực hiện trên UI một cái gì đó như:

<div *ngIf="isDataLoaded">
 ...Your page...
</div

Chỉ khi: isDataLoaded là đúng thì trang mới được hiển thị.

Bạn có thể tìm nạp trước dữ liệu của mình bằng cách sử dụng Bộ giải quyết trong Angular2 + , Bộ giải quyết xử lý dữ liệu của bạn trước khi Thành phần của bạn được tải đầy đủ.

Có nhiều trường hợp bạn chỉ muốn tải thành phần của mình nếu có điều gì đó xảy ra, ví dụ: chỉ điều hướng đến Bảng điều khiển nếu người đó đã đăng nhập, trong trường hợp này, Bộ giải quyết rất tiện dụng.

Nhìn vào sơ đồ đơn giản mà tôi đã tạo cho bạn để biết một trong những cách bạn có thể sử dụng trình phân giải để gửi dữ liệu đến thành phần của mình.

Áp dụng Resolver cho mã của bạn khá đơn giản, tôi đã tạo các đoạn mã cho bạn để xem cách Resolver có thể được tạo:

import { Injectable } from '@angular/core';
import { Router, Resolve, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
import { MyData, MyService } from './my.service';

@Injectable()
export class MyResolver implements Resolve<MyData> {
  constructor(private ms: MyService, private router: Router) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<MyData> {
    let id = route.params['id'];

    return this.ms.getId(id).then(data => {
      if (data) {
        return data;
      } else {
        this.router.navigate(['/login']);
        return;
      }
    });
  }
}

và trong mô-đun :

import { MyResolver } from './my-resolver.service';

@NgModule({
  imports: [
    RouterModule.forChild(myRoutes)
  ],
  exports: [
    RouterModule
  ],
  providers: [
    MyResolver
  ]
})
export class MyModule { }

và bạn có thể truy cập nó trong Thành phần của bạn như thế này:

/////
 ngOnInit() {
    this.route.data
      .subscribe((data: { mydata: myData }) => {
        this.id = data.mydata.id;
      });
  }
/////

Và trong Tuyến đường một cái gì đó như thế này (thường là trong tệp app.routing.ts):

////
{path: 'yourpath/:id', component: YourComponent, resolve: { myData: MyResolver}}
////