Angular2动态组件答案

【问题标题】：Angular2 dynamic componentAngular2动态组件
【发布时间】：2017-06-17 15:59:34
【问题描述】：

我使用 Angular 2 + TypeScript。目前正在添加 angular2-busy。

对于这个库，我需要包含 angular2-dynamic-component，但我不知道我必须用它做什么。

这是错误

这是应用模块

import {BusyModule} from 'angular2-busy/build/src';
import {DynamicComponentModule} from 'angular2-dynamic-component'

@NgModule({
imports: [        
    BusyModule,
    DynamicComponentModule
],

出了什么问题以及如何解决？

更新 angular2-busy/busy.component.js

BusyComponent = __decorate([
    core_1.Component({
        selector: 'ng-busy',
        template: "\n        <div [class]=\"wrapperClass\" *ngIf=\"isActive()\" @flyInOut>\n            <DynamicComponent [componentTemplate]=\"template\" [componentInputData]=\"context\">\n            </DynamicComponent>\n        </div>\n    ",
        animations: [
            core_1.trigger('flyInOut', [
                core_1.transition('void => *', [
                    inactiveStyle,
                    core_1.animate(timing)
                ]),
                core_1.transition('* => void', [
                    core_1.animate(timing, inactiveStyle)
                ])
            ])
        ]
    }), 
    __metadata('design:paramtypes', [promise_tracker_service_1.PromiseTrackerService])
], BusyComponent);
return BusyComponent;

这是出现错误的地方。

【问题讨论】：

什么是“angular2-dynamic-component”？
你想用这个 [componentInputData] 属性实现什么。假设它是那个指令，我没有看到 npmjs.com/package/angular2-dynamic-component 中记录的任何此类属性。
我不知道为什么需要它，但是我不能包含 angular2-busy，如果您有一些建议，请
'我没有看到任何这样的属性'它们安装在 packeg.json 中并在 setup.js 中配置
从这里开始理性。阅读错误信息。很明显，它抱怨您在模板中使用的属性[componentInputData]。您选择将其添加到您的模板中。它会导致错误。所以我的问题是：为什么你的模板中有这个？目标是什么？您在文档中的什么地方发现该属性存在并做了什么？

标签： angular typescript angularjs-directive angular-animations

【解决方案1】：

我之前也遇到过这个问题，我通过删除以下内容解决了：

<DynamicComponent [componentTemplate]=\"template\" [componentInputData]=\"context\">\n            </DynamicComponent>\n        </div>\n

【讨论】：

这是hack，我们不能这样做