如何在JQuery中动态注入AngularJS 2组件? [英] How can I inject an AngularJS 2 component dynamically in JQuery?
问题描述
我有一个Angular2应用程序,并在应用程序的某些部分使用了JQuery.示例代码如下:
I have an Angular2 application and consumes JQuery in some parts of the application. A sample code is below:
$(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>
.
The <angular-test>
is a sample angular component. The problem that I'm facing is component does not expands to it's component which means it is not processed, so it stay as <angular-test></angular-test>
in the DOM.
在jQuery操纵DOM后,如何动态注入名为<angular-test>
的Angular2组件?我应该使用什么Angular API?
How can I inject an Angular2 component called <angular-test>
dynamically after the DOM is manipulated by JQuery? What Angular API I should use?
PS.在示例中,我没有包含角度分量的代码.
PS. In the example I have not included the code for the angular component.
推荐答案
我意识到这个问题已经有10个月了,但是我会发布此问题,以防万一其他人落在这里...我最近在遇到类似的问题,也遇到了Angular 2与第三方js库一起工作,我需要通过html字符串将Angular组件添加到第三方库中.最终,我找到了这个答案,它解决了一个类似的问题.
I realize this question is 10 months old but I'll post this just in case anyone else lands here... I was recently having a similar problem getting Angular 2 to work with a third party js library where I needed to add an Angular component to the third party lib via html strings. I eventually found this answer to a similar question and it solved my problem.
Radim很好地解释了如何动态加载组件,但是我最终对其代码进行了一些修改,以使组件加载更加清晰.
Radim gives an excellent explanation of how to dynamically load components, but I ended up modifying his code slightly to show the component loading a little clearer.
我只更改了dynamic.component.holder文件,使其具有一个使用addComponent()函数加载组件的按钮,如下所示:...
I only changed the dynamic.component.holder file to have a button that loads the component with the addComponent() function like so... Check out this plunker for all the code.
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;
});
}
}
这篇关于如何在JQuery中动态注入AngularJS 2组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!