Bazı HTML içeren yönergeleri manuel olarak derlemek istiyorum. $compileAngular 2'deki karşılığı nedir ?

Örneğin, Angular 1'de, dinamik olarak bir HTML parçası derleyebilir ve bunu DOM'a ekleyebilirim:

var e = angular.element('<div directive></div>');
element.append(e);
$compile(e)($scope);

Açısal 2.3.0 (2016-12-07)

Tüm ayrıntıları kontrol etmek için:

• Dinamik Bileşeni Angular 2.0 ile derlemek için dinamik şablonu nasıl kullanabilirim / oluşturabilirim?

Bunu iş başında görmek için:

• çalışan bir kazıcı gözlemleyin (2.3.0+ ile çalışarak)

Müdürler:

1) Şablon Oluşturun
2) Bileşen Oluşturun
3) Modül Oluşturun
4) Modülü Derleyin
5) ComponentFactory oluşturun (ve önbelleğe alın)
6) bunun bir Örneğini oluşturmak için Hedef kullanın

Bir Bileşenin nasıl oluşturulacağına hızlı bir genel bakış

createNewComponent (tmpl:string) {
  @Component({
      selector: 'dynamic-component',
      template: tmpl,
  })
  class CustomDynamicComponent  implements IHaveDynamicData {
      @Input()  public entity: any;
  };
  // a component for this particular template
  return CustomDynamicComponent;
}

NgModule'e bileşen enjekte etmenin bir yolu

createComponentModule (componentType: any) {
  @NgModule({
    imports: [
      PartsModule, // there are 'text-editor', 'string-editor'...
    ],
    declarations: [
      componentType
    ],
  })
  class RuntimeComponentModule
  {
  }
  // a module for just this Type
  return RuntimeComponentModule;
}

Bir kod parçacığı nasıl oluşturulur ComponentFactory (ve önbelleğe alınır)

public createComponentFactory(template: string)
    : Promise<ComponentFactory<IHaveDynamicData>> {    
    let factory = this._cacheOfFactories[template];

    if (factory) {
        console.log("Module and Type are returned from cache")

        return new Promise((resolve) => {
            resolve(factory);
        });
    }

    // unknown template ... let's create a Type for it
    let type   = this.createNewComponent(template);
    let module = this.createComponentModule(type);

    return new Promise((resolve) => {
        this.compiler
            .compileModuleAndAllComponentsAsync(module)
            .then((moduleWithFactories) =>
            {
                factory = _.find(moduleWithFactories.componentFactories
                                , { componentType: type });

                this._cacheOfFactories[template] = factory;

                resolve(factory);
            });
    });
}

Yukarıdaki sonucun nasıl kullanılacağı bir kod parçası

  // here we get Factory (just compiled or from cache)
  this.typeBuilder
      .createComponentFactory(template)
      .then((factory: ComponentFactory<IHaveDynamicData>) =>
    {
        // Target will instantiate and inject component (we'll keep reference to it)
        this.componentRef = this
            .dynamicComponentTarget
            .createComponent(factory);

        // let's inject @Inputs to component instance
        let component = this.componentRef.instance;

        component.entity = this.entity;
        //...
    });

Tüm ayrıntılarla birlikte tam açıklama burada okuyun veya çalışma örneğini inceleyin

.

.

OBSOLETE - Angular 2.0 RC5 ile ilgili (yalnızca RC5)

önceki RC sürümleri için önceki çözümleri görmek için lütfen bu yazının geçmişinde arama yapın

Not: @BennyBottema'nın bir yorumda bahsettiği gibi, DynamicComponentLoader artık kullanımdan kaldırıldı, dolayısıyla bu cevap da öyle.

Angular2'nin herhangi bir $ compile eşdeğeri yoktur. Sen kullanabilirsiniz DynamicComoponentLoaderve dinamik kodunuzu derlemek için ES6 sınıfları ile kesmek (Bunu görmek Düşmek ):

import {Component, DynamicComponentLoader, ElementRef, OnInit} from 'angular2/core'

function compileToComponent(template, directives) {
  @Component({ 
    selector: 'fake', 
    template , directives
  })
  class FakeComponent {};
  return FakeComponent;
}

@Component({
  selector: 'hello',
  template: '<h1>Hello, Angular!</h1>'
})
class Hello {}

@Component({
  selector: 'my-app',
  template: '<div #container></div>',
})
export class App implements OnInit {
  constructor(
    private loader: DynamicComponentLoader, 
    private elementRef: ElementRef,
  ) {}

  ngOnInit() {} {
    const someDynamicHtml = `<hello></hello><h2>${Date.now()}</h2>`;

    this.loader.loadIntoLocation(
      compileToComponent(someDynamicHtml, [Hello])
      this.elementRef,
      'container'
    );
  }
}

Ancak yalnızca html ayrıştırıcısı angular2 çekirdeğinin içine girene kadar çalışacaktır.

Kullandığım Açısal Sürüm - Angular 4.2.0

Angular 4, bileşenleri çalışma zamanında yüklemek için ComponentFactoryResolver ile geldi . Bu, ihtiyaçlarınızı karşılayan Angular 1.0'daki $ compile ile aynı uygulamasıdır.

Aşağıdaki örnekte ImageWidget bileşenini DashboardTileComponent'e dinamik olarak yüklüyorum

Bir bileşeni yüklemek için , dinamik bileşeni yerleştirmeye yardımcı olacak ng-şablonuna uygulayabileceğiniz bir yönergeye ihtiyacınız vardır.

WidgetHostDirective

 import { Directive, ViewContainerRef } from '@angular/core';

    @Directive({
      selector: '[widget-host]',
    })
    export class DashboardTileWidgetHostDirective {
      constructor(public viewContainerRef: ViewContainerRef) { 


      }
    }

bu yönerge , dinamik olarak eklenen bileşeni barındıracak öğenin görüntüleme kabına erişim sağlamak için ViewContainerRef'i enjekte eder .

DashboardTileComponent (Dinamik bileşeni oluşturmak için tutucu bileşeni yerleştirin)

Bu bileşen, bir üst bileşenden gelen bir girdiyi kabul eder veya uygulamanıza bağlı olarak hizmetinizden yükleyebilirsiniz. Bu bileşen, bileşenleri çalışma zamanında çözmek için önemli bir rol oynamaktadır. Bu yöntemde, sonuçta bir hizmetten bileşen adını yükleyen ve ComponentFactoryResolver ile çözümleyen ve son olarak verileri dinamik bileşene ayarlayan renderComponent () adlı bir yöntemi de görebilirsiniz .

import { Component, Input, OnInit, AfterViewInit, ViewChild, ComponentFactoryResolver, OnDestroy } from '@angular/core';
import { DashboardTileWidgetHostDirective } from './DashbardWidgetHost.Directive';
import { TileModel } from './Tile.Model';
import { WidgetComponentService } from "./WidgetComponent.Service";


@Component({
    selector: 'dashboard-tile',
    templateUrl: 'app/tile/DashboardTile.Template.html'
})

export class DashboardTileComponent implements OnInit {
    @Input() tile: any;
    @ViewChild(DashboardTileWidgetHostDirective) widgetHost: DashboardTileWidgetHostDirective;
    constructor(private _componentFactoryResolver: ComponentFactoryResolver,private widgetComponentService:WidgetComponentService) {

    }

    ngOnInit() {

    }
    ngAfterViewInit() {
        this.renderComponents();
    }
    renderComponents() {
        let component=this.widgetComponentService.getComponent(this.tile.componentName);
        let componentFactory = this._componentFactoryResolver.resolveComponentFactory(component);
        let viewContainerRef = this.widgetHost.viewContainerRef;
        let componentRef = viewContainerRef.createComponent(componentFactory);
        (<TileModel>componentRef.instance).data = this.tile;

    }
}

DashboardTileComponent.html

 <div class="col-md-2 col-lg-2 col-sm-2 col-default-margin col-default">        
                        <ng-template widget-host></ng-template>

          </div>

WidgetComponentService

Bu, dinamik olarak çözmek istediğiniz tüm bileşenleri kaydettirmek için bir hizmet fabrikasıdır

import { Injectable }           from '@angular/core';
import { ImageTextWidgetComponent } from "../templates/ImageTextWidget.Component";
@Injectable()
export class WidgetComponentService {
  getComponent(componentName:string) {
          if(componentName==="ImageTextWidgetComponent"){
              return ImageTextWidgetComponent
          }
  }
}

ImageTextWidgetComponent (çalışma zamanında yüklediğimiz bileşen)

import { Component, OnInit, Input } from '@angular/core';


@Component({
    selector: 'dashboard-imagetextwidget',
    templateUrl: 'app/templates/ImageTextWidget.html'
})

export class ImageTextWidgetComponent implements OnInit {
     @Input() data: any;
    constructor() { }

    ngOnInit() { }
}

Ekle Sonunda bu ImageTextWidgetComponent öğesini uygulama modülünüze entryComponent olarak ekleyin

@NgModule({
    imports: [BrowserModule],
    providers: [WidgetComponentService],
    declarations: [
        MainApplicationComponent,
        DashboardHostComponent,
        DashboardGroupComponent,
        DashboardTileComponent,
        DashboardTileWidgetHostDirective,
        ImageTextWidgetComponent
        ],
    exports: [],
    entryComponents: [ImageTextWidgetComponent],
    bootstrap: [MainApplicationComponent]
})
export class DashboardModule {
    constructor() {

    }
}

TileModel

 export interface TileModel {
      data: any;
    }

Blogumdan Orjinal Referans

Resmi Belgeler

Örnek Kaynak Kodunu İndirin

bu npm paketi benim için kolaylaştırdı: https://www.npmjs.com/package/ngx-dynamic-template

kullanımı:

<ng-template dynamic-template
             [template]="'some value:{{param1}}, and some component <lazy-component></lazy-component>'"
             [context]="{param1:'value1'}"
             [extraModules]="[someDynamicModule]"></ng-template>

Bir bileşenin bir örneğini dinamik olarak oluşturmak ve DOM'nuza eklemek için aşağıdaki komut dosyasını kullanabilirsiniz ve Angular RC'de çalışmalısınız :

html şablonu:

<div>
  <div id="container"></div>
  <button (click)="viewMeteo()">Meteo</button>
  <button (click)="viewStats()">Stats</button>
</div>

Yükleyici bileşeni

import { Component, DynamicComponentLoader, ElementRef, Injector } from '@angular/core';
import { WidgetMeteoComponent } from './widget-meteo';
import { WidgetStatComponent } from './widget-stat';

@Component({
  moduleId: module.id,
  selector: 'widget-loader',
  templateUrl: 'widget-loader.html',
})
export class WidgetLoaderComponent  {

  constructor( elementRef: ElementRef,
               public dcl:DynamicComponentLoader,
               public injector: Injector) { }

  viewMeteo() {
    this.dcl.loadAsRoot(WidgetMeteoComponent, '#container', this.injector);
  }

  viewStats() {
    this.dcl.loadAsRoot(WidgetStatComponent, '#container', this.injector);
  }

}

Açısal TypeScript / ES6 (Açısal 2+)

AOT + JIT ile aynı anda çalışır.

Nasıl kullanılacağını burada oluşturdum: https://github.com/patrikx3/angular-compile

npm install p3x-angular-compile

Bileşen: Bir bağlam ve bazı html verileri olmalı ...

Html:

<div [p3x-compile]="data" [p3x-compile-context]="ctx">loading ...</div>

Basit dinamik Açısal bileşenleri derlemeye izin veren bileşeni görebilirsiniz https://www.npmjs.com/package/@codehint-ng/html-compiler

Bu sorunun eski olduğunu biliyorum, ancak AOT etkinken bu sorunu nasıl çözeceğimi bulmak için haftalarca uğraştım. Bir nesneyi derleyebildim ancak mevcut bileşenleri hiçbir zaman çalıştıramadım. Sonunda özel bir şablon yürütmek kadar kod derlemeyi düşünmediğim için inceliğini değiştirmeye karar verdim. Benim düşüncem, herkesin yapabileceği ve mevcut fabrikalarda dolaşabileceği html'yi eklemekti. Bunu yaparken element / attribute / etc için arama yapabilirim. bu HTMLElement üzerinde bileşeni adlandırır ve çalıştırır. Onu çalıştırmayı başardım ve bunu bir başkasına harcadığım muazzam miktarda zaman kazanmak için paylaşmam gerektiğini düşündüm.

@Component({
    selector: "compile",
    template: "",
    inputs: ["html"]
})
export class CompileHtmlComponent implements OnDestroy {
    constructor(
        private content: ViewContainerRef,
        private injector: Injector,
        private ngModRef: NgModuleRef<any>
    ) { }

    ngOnDestroy() {
        this.DestroyComponents();
    }

    private _ComponentRefCollection: any[] = null;
    private _Html: string;

    get Html(): string {
        return this._Html;
    }
    @Input("html") set Html(val: string) {
        // recompile when the html value is set
        this._Html = (val || "") + "";
        this.TemplateHTMLCompile(this._Html);
    }

    private DestroyComponents() { // we need to remove the components we compiled
        if (this._ComponentRefCollection) {
            this._ComponentRefCollection.forEach((c) => {
                c.destroy();
            });
        }
        this._ComponentRefCollection = new Array();
    }

    private TemplateHTMLCompile(html) {
        this.DestroyComponents();
        this.content.element.nativeElement.innerHTML = html;
        var ref = this.content.element.nativeElement;
        var factories = (this.ngModRef.componentFactoryResolver as any)._factories;
        // here we loop though the factories, find the element based on the selector
        factories.forEach((comp: ComponentFactory<unknown>) => {
            var list = ref.querySelectorAll(comp.selector);
            list.forEach((item) => {
                var parent = item.parentNode;
                var next = item.nextSibling;
                var ngContentNodes: any[][] = new Array(); // this is for the viewchild/viewchildren of this object

                comp.ngContentSelectors.forEach((sel) => {
                    var ngContentList: any[] = new Array();

                    if (sel == "*") // all children;
                    {
                        item.childNodes.forEach((c) => {
                            ngContentList.push(c);
                        });
                    }
                    else {
                        var selList = item.querySelectorAll(sel);

                        selList.forEach((l) => {
                            ngContentList.push(l);
                        });
                    }

                    ngContentNodes.push(ngContentList);
                });
                // here is where we compile the factory based on the node we have
                let component = comp.create(this.injector, ngContentNodes, item, this.ngModRef);

                this._ComponentRefCollection.push(component); // save for our destroy call
                // we need to move the newly compiled element, as it was appended to this components html
                if (next) parent.insertBefore(component.location.nativeElement, next);
                else parent.appendChild(component.location.nativeElement);

                component.hostView.detectChanges(); // tell the component to detectchanges
            });
        });
    }
}

Html kodunu enjekte etmek istiyorsanız yönergeyi kullanın

<div [innerHtml]="htmlVar"></div>

Tüm bileşeni bir yerde yüklemek istiyorsanız, DynamicComponentLoader'ı kullanın:

https://angular.io/docs/ts/latest/api/core/DynamicComponentLoader-class.html