使用第三方模块创建动态组件Angular5 +

时间:2018-04-12 03:12:46

标签: angular

我正在尝试创建动态组件,因为模板将作为服务中的字符串出现。我也在使用prime-ng。

  // Here we create the component.
  private createComponentFromRaw(template: string = `asdfg`) {

    // Now we create a new component. It has that template, and we can even give it data.
    const tmpCmp = Component({ template : `<p>hello</p>`, })(class {
      // the class is anonymous. But it's a quite regular angular class. You could add @Inputs,
      // @Outputs, inject stuff etc.
      val:number = 10;
      alert1() {
        alert('hhhh')
      }
      ngOnInit() { /* do stuff here in the dynamic component */}
    });

    // Now, also create a dynamic module.
    const tmpModule = NgModule({
      declarations: [tmpCmp, HelloComponent],
      imports: [FormsModule, SliderModule],
      entryComponents: [tmpCmp]
      // providers: [] - e.g. if your dynamic component needs any service, provide it here.
    })(class {});

    // Now compile this module and component, and inject it into that #vc in your current component template.
    this.compiler.compileModuleAndAllComponentsAsync(tmpModule)
      .then((factories) => {
        const f = factories.componentFactories[0];
        this.cmpRef = f.create(this.injector, [], null, this.moduleRef);
        this.cmpRef.instance.name = 'my-dynamic-component';
        this.vc.insert(this.cmpRef.hostView);
      });
  }

我面临的问题是,我在进口数组中使用prime-ng中的 SliderModule ,这个组件唯一呈现的是仅滑块和任何其他html等没有渲染,无论我是否在模板中调用prime-ng组件,都会发生这种情况,您可以在模板字符串中看到。

任何人都可以向我解释我的错误以及如何在动态组件中调用任何第三方模块。

0 个答案:

没有答案