Question

我有父母和孩子两个组成部分

父级在构造函数中解析一个承诺，子级将其承诺作为@Input（）参数接收

除了afterViewCheck和afterContentCheck之外，孩子没有收到生活提示挂钩中的承诺结果，我想避免这些情况。

我还希望避免在行为主题或类似内容中包含共享数据的共享服务

所以问题是，在以promise的结果作为输入参数构造模板之前，我可以等待promise吗？

父母：

// html: <app-chil [brands]="brands"></>

brands: Brand[] = []

constructor() {
  this.getBrands()
}

async getBrands() {
  this.brands = await new Promise<Brand[]>(resolve => 
    this.equipmentService.getBrands().subscribe(brands => resolve(brands)))
}

孩子：

@Input() brands: Brand[] = []

constructor() { }

ngAfterViewInit() {
  console.log(this.brands) // receive brands here
}

Answer 1

有了二传手，您就不需要使用任何生命周期挂钩及其清洁器。

brands: Brand[] = [];

constructor() {
   this.getBrands()
}

async getBrands() {
  this.brands = await new Promise<Brand[]>(resolve => 
    this.equipmentService.getBrands().subscribe(brands => resolve(brands)))
}

孩子：

private _brands: Brand[] = [];
@Input() set brands(data: Brand[]) {
    this._brands = data;
    console.log(data);
}

constructor() { }

Answer 2

从promise中进行观察，并将该观察结果传递给孩子，然后对异步管道使用简单插值。

这里是一个例子。阅读并使其适应您的应用程序（已通过测试）。

孩子：

import { Component, Input } from '@angular/core';
import {Observable} from 'rxjs';

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name | async}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: Observable<string[]>;


}

父母：

import { Component } from '@angular/core';
import { of } from 'rxjs';
/* import { from } from 'rxjs'; //import 'from' to convert your promise to observable*/

@Component({
  selector: 'my-app',
  template: `<hello [name]="name"></hello>`,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = of("angular"); //name = from(yourPromise)
}

在将结果作为输入参数之前等待承诺

2 个答案: