v14 中 Angular 編譯器的替代品是什么？

Question

我正在嘗試升級到 Angular 14。我當前的應用程序使用“@angular/core”中的編譯器在運行時編譯 angular 模板。 為了使用它，我必須在構建時包含 --aot=false 標志。 我知道有幾個版本已被棄用。

升級后，我在嘗試構建時遇到錯誤，提示“模板必須是字符串”。 這是對我試圖在運行時創建一個 angular 組件的回應。

明確一點，我所說的 angular 模板字符串的意思是

    let angularTemplateString = 'Hello {{ firstNameFromPassedInContext }}';

它們變得更加復雜，但這就是它的要點。

我懷疑在 v14 中仍然有辦法在運行時編譯 angular 模板。 有誰知道如何做到這一點，或者是否有更好的方法與 v14 兼容？

Answer 1

您正在尋找這樣的東西嗎？

@Component({
  selector: 'hello',
  template: '<div #container></div>',
})
export class HelloComponent implements AfterViewInit {
  @ViewChild('container', { read: ViewContainerRef })
  container: ViewContainerRef;

  constructor(private injector: Injector) {}

  ngAfterViewInit() {
    // Define the component using Component decorator.
    const component = Component({
      selector: 'test',
      template: '<div>This is the dynamic template. Test value: {{test}}</div>',
      styles: [':host {color: red}'],
    })(
      class {
        test = 'some value';
      }
    );

    // Define the module using NgModule decorator.
    const module = NgModule({ declarations: [component] })(class {});

    const componentRef = this.container.createComponent(component, {
      injector: this.injector,
      ngModuleRef: createNgModuleRef(module, this.injector),
    });
    setTimeout(() => (componentRef.instance.test = 'some other value'), 2000);
  }
}

堆棧閃電戰