如何在JQuery中动态注入AngularJS 2组件？

Question

我有一个Angular2应用程序，并在应用程序的某些部分使用JQuery。示例代码如下：

​

$(function(){
    var id = 'post349';
    var data = 'The quick brown fox...';
    $('<div><angular-test></angular-test></div>').attr('id',id).addClass('myclass').html(data).appendTo('#records_wrapper');
    // Looking for the AngularJS 2.0 API to dynamically inject <angular-test> component.
});

#records_wrapper {
    background-color:red;
    border:4px solid orange;
}

#records_wrapper div {
    background-color:green;
}

.myclass {
    border:2px solid yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="records_wrapper"></div>

​

<angular-test>是一个样例角度组件。我面临的问题是组件没有扩展到它的组件，这意味着它没有被处理，所以它在DOM中仍然是<angular-test></angular-test>。

在JQuery操作了DOM之后，我如何动态地注入一个名为<angular-test>的Angular2组件？我应该使用什么样的Angular API？

PS。在这个例子中，我没有包含angular组件的代码。

Answer 1

我知道这个问题已经10个月了，但我会把它贴出来，以防其他人在这里落地……我最近遇到了一个类似的问题，让Angular 2与第三方js库一起工作，我需要通过html字符串将一个Angular组件添加到第三方库。我最终发现this answer解决了类似的问题，它解决了我的问题。

Radim很好地解释了如何动态加载组件，但我最后稍微修改了他的代码，以便更清楚地显示组件加载。

我只更改了dynamic.component.holder文件，使其具有一个使用addComponent()函数加载组件的按钮，如下所示...请查看此plunker以获取所有代码。

import {Component,OnInit} from '@angular/core';
import {ComponentResolver,ViewChild,ViewContainerRef} from '@angular/core';
import {FORM_DIRECTIVES} from "@angular/common";

import { IHaveDynamicData, CustomComponentBuilder } from './custom.component.builder';

@Component({
  selector: 'dynamic-holder',
  template: `
<div>
  <h1>Dynamic content holder</h1>
  <hr />
  <div #dynamicContentPlaceHolder></div>
  <hr />
  change description <input [(ngModel)]="entity.description" style="width:500px" />
  <button (click)="addComponent()">Add Component</button>
</div>
`,
  providers: [CustomComponentBuilder], 
}) 
export class DynamicHolder implements OnInit
{  
    public entity: { description: string };
    dynamicComponent: IHaveDynamicData;

    // reference for a <div> with #
    @ViewChild('dynamicContentPlaceHolder', {read: ViewContainerRef}) 
    protected dynamicComponentTarget: ViewContainerRef;

    // ng loader and our custom builder
    constructor(
        protected componentResolver: ComponentResolver,
        protected customComponentBuilder: CustomComponentBuilder
    ) 
    {}

    public ngOnInit(){
      // just init the entity for this example
      this.entity = { 
        description: "The description of the user instance, passed as (shared) reference" 
      };


      // dynamic template built (TODO driven by some incoming settings)
      var template = this.customComponentBuilder
        .CreateTemplate();

      // now we get built component, just to load it
      this.dynamicComponent = this.customComponentBuilder
        .CreateComponent(template, FORM_DIRECTIVES);
    }

    public addComponent() {
      // we have a component and its target
      this.componentResolver
        .resolveComponent(this.dynamicComponent)
        .then((factory: ng.ComponentFactory<IHaveDynamicData>) =>
        {
            // Instantiates a single {@link Component} and inserts its Host View 
            //   into this container at the specified `index`
            let dynamicComponent = this.dynamicComponentTarget.createComponent(factory, 0);

            // and here we have access to our dynamic component
            let component: IHaveDynamicData = dynamicComponent.instance;

            component.name = "The name passed to component as a value";
            component.entity = this.entity; 
        });
    }
}    

Answer 2

为什么要使用jquery来创建一个使用angular方式的元素。

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