动态组件加载器Angular2 final答案

【问题标题】：Dynamic component loader Angular2 final动态组件加载器Angular2 final
【发布时间】：2016-10-05 08:38:20
【问题描述】：

我试图创建一个这样的组件动态：

这是我的文件 dynamicComponent.ts：

import {Directive, Input, ViewContainerRef, Component, ReflectiveInjector, ComponentFactory, ComponentFactoryResolver} from '@angular/core';

export function createComponentFactory(resolver: ComponentFactoryResolver, metadata: Component): Promise<ComponentFactory<any>> {
const cmpClass = class DynamicComponent {
};
const decoratedCmp = Component(metadata)(cmpClass);
return new Promise((resolve) => {
    resolve(resolver.resolveComponentFactory(decoratedCmp)); 
});
}

@Directive({
selector: 'dynamic-html-outlet'
 })
export class DynamicComponent {
@Input() src: string;

constructor(public vcRef: ViewContainerRef, public resolver:    ComponentFactoryResolver) {
}

ngOnChanges() {
    if (!this.src) return;

    const metadata = new Component({
        selector: 'dynamic-component',
        template: this.src
    });
    createComponentFactory(this.resolver, metadata)
        .then(factory => {
            const injector = ReflectiveInjector.fromResolvedProviders([],    this.vcRef.parentInjector);
            this.vcRef.createComponent(factory, 0, injector, []).changeDetectorRef.detectChanges();
        });
}
}

这里是 app.module.ts ：

@NgModule({
   declarations: [
   MyApp,
   DynamicComponent,
   ...APP_PAGES,
   ...APP_DIRECTIVES 
],
imports: [
  IonicModule.forRoot(MyApp),
  NgReduxModule,
  MomentModule,
  TranslateModule.forRoot({
   provide: TranslateLoader,
   useFactory: (http: Http) => new TranslateStaticLoader(http, '../assets/i18n', '.json'),
  deps: [Http]
   })
  ],
 bootstrap: [IonicApp],
 entryComponents: [
 MyApp,
 //DynamicComponent,
 //ScrollableHeader,
 AppLink, 
 ...APP_PAGES,
 ...APP_DIRECTIVES
 ],
 providers: [
  ...APP_SERVICES
 ]
 })

必须加载的组件 AppLink 是这样定义的：

@Component({
  selector: 'app-link',
  template: '<a (click)="openLink($event);"><ng-content></ng-content></a>',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppLink {
  @Input() link;
  //some method here
}

我总是遇到这个错误：

polyfills.js:3 未处理的承诺拒绝：模板解析错误：无法绑定到“链接”，因为它不是“应用链接”的已知属性。

感谢您的帮助？

【问题讨论】：

请提供app.module的代码

标签： angular ionic2

【解决方案1】：

您需要将组件添加到

@NgModule({
  entryComponents: [MyDynamicComponent],
  ...
})

用于正在创建的组件工厂。

【讨论】：

我添加了 @NgModule({ entryComponents: [DynamicComponent], ... }) 但我总是收到此错误：无法绑定到 'src'，因为它不是 ' 的已知属性动态 html 出口”。
听起来您没有将DynamicComponent 添加到您正在使用它的模块的directives: []（或添加到imports: [] 的模块中）
您不应将DynamicComponent 广告到entryComponents，而应将您想要添加的组件添加到DynamicComponent。 DynamicComponent需要进入declarations。
我添加了：DynamicComponent 到 declarations (app.module.ts)，我还添加了组件 AppLink，我想通过 DynamicComponent 添加。它的定义类似于：@Component({ selector: 'app-link', template: '', changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['link'] }) 但我总是收到这个错误：无法绑定到'link'，因为它不是'app-link'的已知属性。我尝试添加 @Input() 链接但不工作
您能否编辑您的问题并添加您当前拥有的代码。 cmets 中的代码不可读。