javascript - 在 @Component 中使用导入的模块

Question

我正在尝试根据我在 @Component 之前导入的模块属性设置 templateUrl，即 -

import { details } from './details';

@Component({
  selector: 'app-my-cmp',
  templateUrl: details.typeA ? './pageA.html' : './pageB.html'
})

当我这样做时，我收到一个错误 - Module not found，但是当我在 ngOnInit() 中使用导入的模块时，我可以访问这个模块。

如何在 templateUrl 行中使用导入的模块？

Answer 1

只是另一种解决方案。

您可以使用 ng-template 实现此目的，然后根据您的情况动态更新模板，如下所示 -

import {
  Compiler, Component, Injector, VERSION, ViewChild, NgModule, NgModuleRef,
  ViewContainerRef
} from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<ng-container #vc></ng-container>`,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  @ViewChild('vc', {read: ViewContainerRef}) vc;
  conditionValue = 'myCondition';

  constructor( 
    private _compiler: Compiler,
    private _injector: Injector,
    private _m: NgModuleRef<any>
  ) {

  }
  ngOnInit() {
    let tmpCmp;
    if (this.conditionValue === 'myCondition') {
      tmpCmp = Component({
        templateUrl: './e.html'})(class {
      });
    } else {
      // something else
    }

    const tmpModule = NgModule({declarations: [tmpCmp]})(class { });

    this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
      .then((factories) => {
        const f = factories.componentFactories[0];
        const cmpRef = f.create(this._injector, [], null, this._m);
        cmpRef.instance.name = 'dynamic';
        this.vc.insert(cmpRef.hostView);
      })
  }
}

#Example

更多信息，请引用-

• https://blog.angularindepth.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e