Question

有没有办法让AngularJS 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>

父组件的方法包装一个返回promise的服务方法（此时）。因此，父组件的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));
}

是否有更好的方法来处理此构造，以便父组件方法可以为子项提供模型，等等？

Answer 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的数组成员。）

异步更新AngularJS 2组件中的输入

1 个答案: