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

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

$（函数（）{
变量id='post349'；
var数据='快速棕色狐狸…'；
$（“”）.attr（'id'，id）.addClass（'myclass'）.html（数据）.appendTo（'；
//正在寻找AngularJS 2.0 API来动态注入组件。
});
#记录#{
背景色：红色；
边框：4倍纯色橙色；
}
#档案室{
背景颜色：绿色；
}
.myclass{
边框：2倍纯黄色；
}
为什么要使用jquery以角度方式创建元素

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

var newDirective=angular.element（“”）；
元素。追加（newDirective）；
$compile（newDirective）（$scope）；
我知道这个问题已经问了10个月了，但我会把它贴出来，以防其他人在这里登陆。。。我最近遇到了一个类似的问题，让Angular 2与第三方js库一起工作，我需要通过html字符串将Angular组件添加到第三方库中。我最终发现了一个类似的问题，它解决了我的问题

Radim对如何动态加载组件给出了一个很好的解释，但最后我稍微修改了他的代码，以更清晰地显示组件加载

我只更改了dynamic.component.holder文件，使其具有一个按钮，可以使用addComponent（）函数加载组件，如下所示。。。检查所有代码

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; 
        });
    }
}    

从'@angular/core'导入{Component，OnInit}；
从'@angular/core'导入{ComponentResolver，ViewChild，ViewContainerRef}；
从“@angular/common”导入{FORM_directions}”；
从“./custom.component.builder”导入{IHaveDynamicData，CustomComponentBuilder}；
@组成部分({
选择器：'动态保持架'，
模板：`
动态内容持有者


更改描述
添加组件
`,
提供者：[CustomComponentBuilder]，
}) 
导出类DynamicHolder实现OnInit
{  
公共实体：{description:string}；
dynamicComponent:IHaveDynamicData；
//参考资料#
@ViewChild（'dynamicContentPlaceHolder'，{read:ViewContainerRef}）
受保护的dynamicComponentTarget:ViewContainerRef；
//ng loader和我们的定制生成器
建造师(
受保护的组件解析程序：组件解析程序，
受保护的customComponentBuilder:customComponentBuilder
) 
{}
公共ngOnInit（）{
//对于这个例子，只需初始化实体
this.entity={
description:“用户实例的描述，作为（共享）引用传递”
};
//构建动态模板（TODO由一些传入设置驱动）
var template=this.customComponentBuilder
.CreateTemplate（）；
//现在我们构建了一个组件，只是为了加载它
this.dynamicComponent=this.customComponentBuilder
.CreateComponent（模板、表单_指令）；
}
公共addComponent（）{
//我们有一个组件和它的目标
这是一个组件解析器
.resolveComponent（此.dynamicComponent）
.然后（（工厂：ng.ComponentFactory）=>
{
//实例化单个{@link Component}并插入其主机视图
//在指定的`索引处装入此容器`
让dynamicComponent=this.dynamicComponentTarget.createComponent（工厂，0）；
//在这里，我们可以访问我们的动态组件
let component:iHavedynamicATA=dynamicComponent.instance；
component.name=“作为值传递给组件的名称”；
component.entity=this.entity；
});
}
}    
由于我使用的是Angular 2，$compile可以工作吗？我说的对吗，我必须创建angular组件，编译成HTML，然后像在DOM中附加任何元素一样附加到DOM中？这个问题是关于angular 2的。