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。在示例中，我没有包含角度分量的代码。

Answer 1

我意识到这个问题已经有10个月了，但是我发布这个以防万一其他人降落在这里...我最近遇到类似的问题让Angular 2与我需要的第三方js库一起工作通过html字符串将Angular组件添加到第三方lib。我最终找到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创建元素使用角度方式。

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

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

2 个答案: