角:具有角分量动态的JSON HTML标记

Question

编辑1：

感谢您的@Narm提供的解决方案。我让它起作用！

在 let myTemplate = '<div class="test" (tap)="test();">Test</div>';中，我有一个点击功能。

当我单击它调用函数时，它不起作用并给出错误：

ERROR TypeError: _co.another_test is not a function

这是我到目前为止所拥有的：

ngOnInit(){ 
   ...
    let myTemplate = `<div class="test" (tap)="test();">Test</div>`;
   ...
}
test(){
  console.log("Test");
}

有什么想法吗？

---

下面的原始问题

使用REST来使用PHP，我获得了带有角组件的HTML标记：

来自PHP：

function send_html(){
    $html = '<div class="test" *ngIf="data">This is an example</div>';
    return $html;
};

然后，在我的角度项目中，我尝试使用componentFactoryResolver动态添加此HTML ：(我知道它仅接受角组件(

这是我的过程：

1. 在main.ts中(如下所示(：致电getDynamicREST()并从php。
获取$html
2. 获取数据时，然后将其发送到my_component.ts以使其作为角度组件。
3. 一旦HTML标记成为Angular组件的一部分，然后使用createComponent创建组件。

当然，它不起作用...

这是我到目前为止所拥有的：请随时将其拆开。

main.html

<div class="top">
   <ng-template #main></ng-template>
</div>

main.ts

import { Component, ViewChild, ComponentFactoryResolver, ViewContainerRef  } from '@angular/core';
import { my_component } from './my_component';
@Component({
    selector: 'page-main_page',
    templateUrl: 'main_page.html'
})
export class main_page {        
    @ViewChild('main', { read: ViewContainerRef }) entry: ViewContainerRef;
    data: any;
constructor(public resolver: ComponentFactoryResolver,
            public mine: my_component ){    
};      
    ngOnInit(){ 
        this.getDynamicREST().then((res)=>{
            this.mine.data = res;
            const factory = this.resolver.resolveComponentFactory(my_component);
            this.entry.createComponent(factory);
        })
    };
}

my_component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my_component ',
    template: '<div class="my_component">{{data}}</div>'
})
export class my_component {
   data: any;
}

我将如何实现此目标，以便我可以动态获取角度并显示它们？

任何帮助都将不胜感激。

谢谢。

Answer 1

您处在正确的路径上。几个月前，我遇到了同样的情况，这是实现目标的解决方案。

如果您想查看现场运行的代码并有机会使用它，我在这里附上了一个stackblitz。动态组件一开始可能是一个挑战。

实时演示

app.component.ts

此组件充当动态组件的容器，并且是将创建的位置。

import {
  Component, ViewChild, OnInit, OnDestroy,
  AfterViewInit, ComponentFactoryResolver,
  Input, Compiler, ViewContainerRef, NgModule,
  NgModuleRef, Injector
} from '@angular/core';

import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
  @ViewChild('vc', { read: ViewContainerRef }) _container: ViewContainerRef;
  private cmpRef;
  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private compiler: Compiler,
    private _injector: Injector,
    private _m: NgModuleRef<any>) { }
  ngOnInit() { }
  ngAfterViewInit() {
    let myTemplate = `<h2> Generated on the fly</h2>
                      <p>You can dynamically create your component template!</p>`
    @Component({ 
      template: myTemplate 
      })
      class dynamicComponent {
        constructor(){}
    }
    @NgModule({
      imports: [
        BrowserModule
      ],
      declarations: [dynamicComponent]
    })class dynamicModule {};
    const mod = this.compiler.compileModuleAndAllComponentsSync(dynamicModule);
    const factory = mod.componentFactories.find((comp) =>
      comp.componentType === dynamicComponent
    );
    this.cmpRef = this._container.createComponent(factory);
  }
  ngOnDestroy() {
    if (this.cmpRef) {
      this.cmpRef.destroy();
    }
  }
}

然后在您的应用程序组件的模板中

app.component.html

<ng-template #vc></ng-template>

然后在您的app.module中您需要导入编译器并将其声明为提供商：

app.module.ts

import {Compiler, COMPILER_OPTIONS, CompilerFactory} from '@angular/core';
import {JitCompilerFactory} from '@angular/platform-browser-dynamic';
export function createCompiler(compilerFactory: CompilerFactory) {
  return compilerFactory.createCompiler();
}

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    routing
  ],
  providers: [
    {provide: COMPILER_OPTIONS, useValue: {}, multi: true},
    {provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS]},
    {provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory]}
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

***编辑" Tap"问题

您想做的是绑定到(单击(事件，我不知道任何(点击(事件，并且在事件中列出了MDN事件的事件参考中没有列出的事件参考MDN

在您的动态组件中添加以下内容：

let myTemplate = `<h2> Generated on the fly</h2>
                      <p>You can dynamically create your component template!</p>
                      <div class="test" (click)="test();">Test</div>`
    @Component({ 
      template: myTemplate 
      })
      class dynamicComponent {
        constructor(){}
        public test(){
          alert("I've been clicked!");
        }
    }

注意，如果您想在操作中看到它！