如何等待渲染组件直到在 Angular 2 中收集所有数据

Question

我尝试了很多方法让 ngModel 在我的编辑页面中工作，但它给了我一个错误。发生错误是因为 ngModel 在加载之前尝试获取数据。请参阅下面的我的代码。

产品编辑组件

import 'rxjs/add/operator/switchMap';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { Location } from '@angular/common';

import { Product } from './../shared/product.model';
import { ProductService } from './../shared/product.service';

@Component({
    selector: 'product-edit',
    template: require('./product-edit.component.html'),
    providers: [ProductService]
})

export class ProductEditComponent implements OnInit {
    product: Product;
    name2: boolean = false;

    constructor(
        private productService: ProductService,
        private route: ActivatedRoute,
        private location: Location,
        private router: Router
    ) { }

    ngOnInit(): void {
        var test = this.route.params
            .switchMap((params: Params) => this.productService.getProduct(+params['id']))
            .subscribe(product => this.product = product).closed;
            console.log(test);
        if (test['closed']) {
            this.name2 = true;
        }
    }

    goBack(): void {
        this.location.back();
    }

    onSave(): void {
        this.router.navigate(['product-edit', this.product]);
    }
}

产品编辑 HTML

<div class="product-edit">
    <h2>Edit: {{product?.name}}</h2>
    <div class="form-group row" *ngIf="name2">
        <label for="name" class="col-2 col-form-label">Name</label>
        <div class="col-10">
            <input class="form-control" id="name" [(ngModel)]="name2" placeholder="" />
        </div>
    </div>
</div>

我怎样才能等到数据被加载而不是渲染我的组件？

Answer 1

您还可以使用路由器在实例化ProductEditComponent.

更具体地说，您需要Resolve在路由声明中使用警卫，例如：

{
  path: 'product/:productId',
  component: ProductEditComponent,
  resolve: { product: ProductResolver }
}

哪里ProductResolver是一个自定义服务，它将加载带有 id 的产品productId。

查看官方文档，其中包含一个完整示例，展示了如何声明路由、如何实现解析以及如何检索组件内的预取数据：https : //angular.io/docs/ts/latest/guide /router.html#resolve-guard