使用angular2中的动态组件加载器进行双向数据绑定

Question

我想知道如何与使用angular2.for中的动态组件加载器加载的组件建立双向数据绑定。

ngAfterViewInit() {
//console.log('Generic Component...' + this.componentName + " Loading");
let componentIndex = this.keysRegister.indexOf(this.componentName);  
this.dcl.loadNextToLocation(this.typesRegister[componentIndex],this.target)
    .then(ref => { 
      ref.instance.componentModel = this.componentModel; 
    });  
console.log('Generic Component...' + this.componentName + " Loaded");
}

因此，如果要在动态加载的组件中更改componentModel，它们也应该在通用组件中反映，反之亦然。 有输入吗？

Answer 1

第一： DynamicComponentLoader现在已不推荐用于几个版本，在下一版本或之后的版本中将为私有。 查看实现并复制它非常简单。 使用ComponentResolver解析组件 ，这将返回一个工厂， ViewContainer使用该工厂来创建组件。

主要区别在于DynamicComponentLoader使用了您提供的ViewContainerRef ，现在您直接使用ViewContainerRef实例来创建新的组件/模板。

至于你的问题：

首先，让单独的2路数据绑定到@Input和@Output 。 我们必须这样做，因为它们的角度确实不同。

快速解答 ：是的，您需要手动管理输入和输出。

为了完全理解为什么我们需要深入研究代码生成器及其作用，我将尽量保持领先地位，这需要一些时间来处理。

需要记住的注意事项：创建组件时，将获得ComponentRef的实例，该实例包含对组件实例的引用。

OUTPUT对于输出，您需要订阅新创建的组件实例上的每个EventEmitter ，这些EventEmitter是您声明的@Output属性，您还需要在适当的时间取消订阅它们，或者中继刚刚使用的组件在销毁发射器时创建为complete()发射器。

输入对于输入，您需要侦听ngDoCheck生命周期挂钩，并检查您认为@Input项目是否已更改的每个项目。 另外，如果您想通过属性将数据传递到新组件，则不可能实现，因为您实际上没有Host元素，您将要创建它...因此，通过以下方式将数据发送到组件：

1. 创建组件时使用新的注入器进行依赖注入
2. 在创建实例后立即在实例上设置值（这与订阅输出的方法相同）

现在，这是非常正确的...嗯，这是很多样板代码，您可以自动执行重复的代码...而这正是angular所做的。

使用模板引擎时，组件实际上是一步一步地表示上述所有内容的“幕后”代码。 它会为您进行所有检查，所有订阅和清理等工作……还调用所有生命周期挂钩，这些挂钩是您组件中实际的中断点。 这一切都是可能的，因为angular会解析组件的模板并了解[inputs]和[outputs] ，它也来自通过@Input()和@Output元数据...对于动画也是如此...

如果您考虑一下，angular是一个HTML到代码引擎，它将HTML标记与用HTML编写的代码指令混合在一起，并从中创建JavaScript代码。 该代码使用您的组件实例（与模板匹配），并执行了称为angular的魔术。