相关疑难解决方法(0)

如何使用/创建动态模板来使用Angular 2.0编译动态组件?

我想动态创建模板.这应该用于ComponentType运行时构建一个并在托管组件内部放置(甚至替换)它.

直到我使用RC4 ComponentResolver,但RC5我收到消息:

ComponentResolver不推荐用于动态编译.使用ComponentFactoryResolver连同@NgModule/@Component.entryComponents或ANALYZE_FOR_ENTRY_COMPONENTS提供商,而不是.对于仅运行时编译,您也可以使用Compiler.compileComponentSync/Async.

我发现了这个(官方的angular2)文件

Angular 2同步动态组件创建

并了解我可以使用其中之一

  • 一种动态的ngIfComponentFactoryResolver.如果我将已知组件传递到托管内部@Component({entryComponents: [comp1, comp2], ...})- 我可以使用.resolveComponentFactory(componentToRender);
  • 真正的运行时编译,带Compiler...

但问题是如何使用它Compiler?上面的注释说我应该打电话:Compiler.compileComponentSync/Async- 那怎么样?

例如.我想为一种设置创建(基于一些配置条件)这种模板

<form>
   <string-editor
     [propertyName]="'code'"
     [entity]="entity"
   ></string-editor>
   <string-editor
     [propertyName]="'description'"
     [entity]="entity"
   ></string-editor>
   ...
Run Code Online (Sandbox Code Playgroud)

在另一种情况下这个(string-editor被替换text-editor)

<form>
   <text-editor
     [propertyName]="'code'"
     [entity]="entity"
   ></text-editor>
   ...
Run Code Online (Sandbox Code Playgroud)

等等(editors属性类型的不同数量/日期/引用,跳过一些用户的某些属性......).即这是一个例子,真正的配置可以生成更多不同和复杂的模板.

该 …

compilation typescript angular2-compiler angular

185
推荐指数
10
解决办法
13万
查看次数

来自 HTTP 调用的 Angular 动态模板

我有一个简单的问题:在一个简单的 Angular 组件中,我们是否可以动态更改通过 http 调用检索的模板,例如:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';


/**
 * Les liens link permettent de passer d'une page à l'autre.
 */
@Component({
  selector: 'mycomponent',
  template: '<strong>Loading…</strong>'
})
export class MyComponent implements OnInit {

  //#region PROPRIÉTÉS
    private moHttp : HttpClient
  //#endregion

  //#region CONSTRUCTEUR
  constructor(poHttp: HttpClient){
    this.moHttp = poHttp;
  }

  public ngOnInit(): void {
    this.moHttp.get('https://myapiUrl').subscribe(poData:any => {

      // here poData is HTML string, and I want to set it instead of the …
Run Code Online (Sandbox Code Playgroud)

http angular2-template angular

4
推荐指数
1
解决办法
8707
查看次数