异步更新 Angular 2 组件中的输入答案

【问题标题】：Asynchronously updating inputs in Angular 2 Components异步更新 Angular 2 组件中的输入
【发布时间】：2019-12-29 05:46:55
【问题描述】：

有没有办法在 Angular 2 中让异步回调提供 @Input 的组件？（我现在专门使用 RC7。）

我的目标是拥有一个包装组件层次结构，作为层次结构中该级别服务的接口。这个想法是可以使用父组件的接口为子组件提供模型，等等。换句话说，父组件将提供一个getChild(ID)，然后将其映射到子组件上的输入以设置其模型，所有这些都在模板中：

<parent-comp #parent>
    <child-comp 
        *ngFor="let id of parent.childIds;" 
        [model]="parent.getChild(id)">
        <!-- And so on, with the child's children, etc. -->
    </child-comp>
</parent-comp>

父组件的方法包装了一个返回承诺的服务方法（此时）。所以父组件的getChild() 方法的内容是问题，因为我需要稍后返回实例。

我考虑过的一个解决方案是修改这些方法以传递模型实例以进行填充。

// In the parent component
public getChild(id: string): Child {
    let child = new Child();
    this.service.getChild(id, child);
    return child;
}

// In the parent service
public getChild(id: string, model: Child): Promise<Child> {
    this.http.get(some_url).toPromise().then(res => model.update(res));
}

有没有更好的方法来处理这个构造，以便父组件方法可以为子组件提供模型等等？

【问题讨论】：

标签： angular typescript

【解决方案1】：

注意：我已经转向 Angular 2.1。

我为此找到的一个解决方案是利用服务的依赖注入模式。例如，在我的模块中，我只有一个单例服务；其他一切都是该服务的层次结构。所以在NgModule，我提供了这项服务：

@NgModule({ provides: SuperService })
export class MyModule;

对于将依赖于该服务的第一层服务（即，该服务将是 SuperService 的子服务），它将使用其构造函数中对该 SuperService 的引用来定义：

@Injectable()
export class FirstTierService (private superService: SuperService) { /** */ }

然后相应的组件调用SuperService 和它自己的FirstTierService 的新实例：

@Component({
    providers: [FirstTierService]
})
export class FirstTierComponent {
    constructor (
        private ftService: FirstTierService,
        @Host() private superService: SuperService) { /** */ }
}

这确保了FirstTeirComponent 可以从宿主组件的实例（DOM 中的某个父组件）中获取其SuperService。删除装饰器将使依赖注入删除在父组件上而不是可能在此元素上找到服务的 DOM 强制执行（我可能误解了有关文档）。

孩子们建立了类似的模式。子服务将在其构造函数中引用父服务，子组件将把自己的服务放在组件定义的provides 中，并在其构造函数中引用这两个服务。

@Injectable()
export class SecondTierService (private ftService: FirstTierService) { /** */ }

@Component({
    providers: [SecondTierService]
})
export class SecondTierComponent {
    constructor (
        private stService: SecondTierService,
        @Host() private ftService: FirstTierService) { /** */ }
}

至于 HTML，我误解了 # 参考：

<parent #parent>
    <child *ngFor="let child of parent.ftService.children">
    </child>
</parent>

（当然假设第一层父服务成员变量名为ftService，并且有一个名为children的数组成员。）

【讨论】：