blocks|key|112793|text|TL;DR：将<div+#placeholder></div>替换为<div><ng-template+#placeholder></ng-template></div>以插入到div中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|112794|以下是一个working+stackblitz+example+(Angular+6)，以及相关代码：|112795|@Component({
++selector:+'my-app',
++template:+`<div><ng-template+#container></ng-template></div>`
})
export+class+AppComponent+implements+OnInit+{

++++@ViewChild('container',+{read:+ViewContainerRef})+viewContainer:+ViewContainerRef;

++++constructor(private+compiler:+Compiler)+{}

++++ngOnInit()+{
++++++this.createComponentFactory(MyDynamicComponent).then(
++++++++(factory:+ComponentFactory<MyDynamicComponent>)+=>+this.viewContainer.createComponent(factory),
++++++++(err:+any)+=>+console.error(err));
++++}

++++private+createComponentFactory(/*...*/)+{/*...*/}

}|code-block|syntax|javascript|112796|看起来<ng-container+#placeholder></ng-container>也在工作(用ng-container代替ng-template+)。我喜欢这种方法，因为<ng-container>明确地针对这个用例(不添加标签的容器)，并且可以在其他情况下使用，比如NgIf，而不需要包装在真正的标签中。|112797|112798|PS：@GünterZöchbauer在评论中引导我进行了正确的讨论，我最终回答了自己的问题。|112799|112800|编辑2018-05-30:更新到stackblitz链接，以获得有效的、最新的示例。|112801|entityMap|0|LINK|mutability|MUTABLE|url|https://stackblitz.com/edit/angular-x8wspi?file=src%252Fapp%252Fapp.component.ts^0|0|5|7|O|Y|1F|2H|3|0|5|Q|0|0|0|3|16|1F|C|1T|B|2H|E|3U|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|D]|$9|18|A|19|B|D]|$9|1A|A|1B|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|1C|8|@]|E|@$9|1D|A|1E|1|1F]]|F|$]]|$1|I|3|J|5|K|7|1G|8|@]|E|@]|F|$L|M]]|$1|N|3|O|5|6|7|1H|8|@$9|1I|A|1J|B|D]|$9|1K|A|1L|B|D]|$9|1M|A|1N|B|D]|$9|1O|A|1P|B|D]|$9|1Q|A|1R|B|D]]|E|@]|F|$]]|$1|P|3|-4|5|6|7|1S|8|@]|E|@]|F|$]]|$1|Q|3|R|5|6|7|1T|8|@]|E|@]|F|$]]|$1|S|3|-4|5|6|7|1U|8|@]|E|@]|F|$]]|$1|T|3|U|5|6|7|1V|8|@]|E|@]|F|$]]|$1|V|3|-4|5|6|7|1W|8|@]|E|@]|F|$]]]|W|$X|$5|Y|Z|10|F|$11|12]]]]

TL;DR: replace <code>&lt;div #placeholder&gt;&lt;/div&gt;</code> with <code>&lt;div&gt;&lt;ng-template #placeholder&gt;&lt;/ng-template&gt;&lt;/div&gt;</code> to insert inside the <code>div</code>.

Here is a <a href="https://stackblitz.com/edit/angular-x8wspi?file=src%2Fapp%2Fapp.component.ts" rel="noreferrer">working stackblitz example</a> (Angular 6), and the relevant code:

<pre><code>@Component({
 selector: 'my-app',
 template: `&lt;div&gt;&lt;ng-template #container&gt;&lt;/ng-template&gt;&lt;/div&gt;`
})
export class AppComponent implements OnInit {

 @ViewChild('container', {read: ViewContainerRef}) viewContainer: ViewContainerRef;

 constructor(private compiler: Compiler) {}

 ngOnInit() {
 this.createComponentFactory(MyDynamicComponent).then(
 (factory: ComponentFactory&lt;MyDynamicComponent&gt;) =&gt; this.viewContainer.createComponent(factory),
 (err: any) =&gt; console.error(err));
 }

 private createComponentFactory(/*...*/) {/*...*/}

}
</code></pre>

It seems <code>&lt;ng-container #placeholder&gt;&lt;/ng-container&gt;</code> is also working (replace <code>ng-template</code> by <code>ng-container</code>). I like this approach because <code>&lt;ng-container&gt;</code> is clearly addressed to this usecase (a container that don't add a tag) and can be used in other situations like <code>NgIf</code> without wrapping in a real tag.

<hr>

PS: @GünterZöchbauer directed me to the right discussion in a comment, and I finally answered my own question.

<hr>

Edit [2018-05-30]: Updated to stackblitz link to have a working, up-to-date example.

blocks|key|113126|text|我一直在为同样的问题寻找解决方案，但认可的答案对我来说不起作用。但我已经找到了更好的、更符合逻辑的解决方案，如何将动态创建的组件作为子组件附加到当前的宿主元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|113127|其思想是使用新创建的组件的元素引用，并通过渲染服务将其附加到当前的元素引用。我们可以通过组件的注入器属性来获取组件对象。|113128|代码如下：|113129|@Directive({
++++selector:+'[mydirective]'
})
export+class+MyDirectiveDirective+{
++++constructor(
++++++++private+cfResolver:+ComponentFactoryResolver,
++++++++public+vcRef:+ViewContainerRef,
++++++++private+renderer:+Renderer2
++++)+{}

++++public+appendComponent()+{
++++++++const+factory+=+
++++++++this.cfResolver.resolveComponentFactory(MyDynamicComponent);
++++++++const+componentRef+=+this.vcRef.createComponent(factory);
++++++++this.renderer.appendChild(
+++++++++++this.vcRef.element.nativeElement,
+++++++++++componentRef.injector.get(MyDynamicComponent).elRef.nativeElement
++++++++);
++++}
}|code-block|syntax|javascript|113130|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I was searching for solution for same problem and approved answer not worked for me. 
But I have found better and much logical solution how to append dynamically created component as child to current host element. 

The idea is to use element reference of newly created component and append it to current element ref by using render service.
We can get component object via its injector property.

Here is the code:

<pre><code>@Directive({
 selector: '[mydirective]'
})
export class MyDirectiveDirective {
 constructor(
 private cfResolver: ComponentFactoryResolver,
 public vcRef: ViewContainerRef,
 private renderer: Renderer2
 ) {}

 public appendComponent() {
 const factory = 
 this.cfResolver.resolveComponentFactory(MyDynamicComponent);
 const componentRef = this.vcRef.createComponent(factory);
 this.renderer.appendChild(
 this.vcRef.element.nativeElement,
 componentRef.injector.get(MyDynamicComponent).elRef.nativeElement
 );
 }
}
</code></pre>

blocks|key|113132|text|我的坏方法是，只需保存动态创建的组件(同级)的引用，并使用vanilla+JS移动它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|113133|++constructor(
++++private+el:+ElementRef,
++++private+viewContainerRef:+ViewContainerRef,
++++private+componentFactoryResolver:+ComponentFactoryResolver,
++)+{}

++ngOnInit()+{
++++const+componentFactory+=+this.componentFactoryResolver.resolveComponentFactory(
++++++MyDynamicComponent,
++++);
++++const+componentRef+=+this.viewContainerRef.createComponent(componentFactory);
++++this.el.nativeElement.appendChild(componentRef.location.nativeElement);
++}|code-block|syntax|javascript|113134|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

My dirty way, just save the reference of dynamically created component (sibling) and move it using vanilla JS:

<pre><code> constructor(
 private el: ElementRef,
 private viewContainerRef: ViewContainerRef,
 private componentFactoryResolver: ComponentFactoryResolver,
 ) {}

 ngOnInit() {
 const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
 MyDynamicComponent,
 );
 const componentRef = this.viewContainerRef.createComponent(componentFactory);
 this.el.nativeElement.appendChild(componentRef.location.nativeElement);
 }
</code></pre>

blocks|key|113136|text|我的解决方案非常类似于@Bohdan+Khodakivskyi。但我试过Renderer2了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|113137|++constructor(
++++private+el:+ElementRef,
++++private+viewContainerRef:+ViewContainerRef,
++++private+componentFactoryResolver:+ComponentFactoryResolver,
++++private+render:+Renderer2
++)+{}

++ngOnInit()+{
++++const+componentFactory+=+this.componentFactoryResolver.resolveComponentFactory(
++++++MyDynamicComponent,
++++);
++++const+componentRef+=+this.viewContainerRef.createComponent(componentFactory);
++++this.render.appendChild(this.el.nativeElement,+componentRef.location.nativeElement)
++}|code-block|syntax|javascript|113138|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

My Solution would be quite similar to @Bohdan Khodakivskyi. But I tried to the Renderer2.

<pre><code> constructor(
 private el: ElementRef,
 private viewContainerRef: ViewContainerRef,
 private componentFactoryResolver: ComponentFactoryResolver,
 private render: Renderer2
 ) {}

 ngOnInit() {
 const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
 MyDynamicComponent,
 );
 const componentRef = this.viewContainerRef.createComponent(componentFactory);
 this.render.appendChild(this.el.nativeElement, componentRef.location.nativeElement)
 }
</code></pre>

blocks|key|2661611|text|更简单的方法现在可以在@+Portal+/cdk中使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2661612|邮箱：|2661613|+npm+i+@angular/cdk|blockquote|2661614|2661615|2661616|app.module.ts：|2661617|import+{+PortalModule+}+from+'@angular/cdk/portal';

@NgModule({
++imports:+[PortalModule],
++entryComponents:+[MyDynamicComponent]
})|code-block|syntax|javascript|2661618|SomeComponent：|2661619|@Component({
++selector:+'some-component',
++template:+`<ng-template+[cdkPortalOutlet]="myPortal"></ng-template>`
})
export+class+SomeComponent+{
++...
++this.myPortal+=+new+ComponentPortal(MyDynamicComponent);
}|2661620|entityMap|0|LINK|mutability|MUTABLE|url|https://material.angular.io/cdk/portal/overview^0|D|6|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]]|C|$]]|$1|D|3|E|5|6|7|17|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|18|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|19|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|1B|8|@]|9|@]|C|$]]|$1|M|3|N|5|O|7|1C|8|@]|9|@]|C|$P|Q]]|$1|R|3|S|5|6|7|1D|8|@]|9|@]|C|$]]|$1|T|3|U|5|O|7|1E|8|@]|9|@]|C|$P|Q]]|$1|V|3|-4|5|6|7|1F|8|@]|9|@]|C|$]]]|W|$X|$5|Y|Z|10|C|$11|12]]]]

Easier approache is now available with <a href="https://material.angular.io/cdk/portal/overview" rel="nofollow noreferrer">Portal</a> available in @angular/cdk.

<blockquote>
 npm i @angular/cdk
</blockquote>

app.module.ts:

<pre><code>import { PortalModule } from '@angular/cdk/portal';

@NgModule({
 imports: [PortalModule],
 entryComponents: [MyDynamicComponent]
})
</code></pre>

SomeComponent:

<pre><code>@Component({
 selector: 'some-component',
 template: `&lt;ng-template [cdkPortalOutlet]="myPortal"&gt;&lt;/ng-template&gt;`
})
export class SomeComponent {
 ...
 this.myPortal = new ComponentPortal(MyDynamicComponent);
}
</code></pre>

blocks|key|2872500|text|@Magicaner的This+answer帮助了我，但缺少一些细节来让它正常工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2872501|总之，是的，您可以使用Renderer2.appendChild添加新的子组件。该指令将如下所示：|style|CODE|2872502|@Directive({
++++selector:+'[myDynamicDirective]'
})
export+class+MyDynamicDirective+implements+OnInit+{
++++constructor(
++++++++private+cfResolver:+ComponentFactoryResolver,
++++++++public+vcRef:+ViewContainerRef,
++++++++private+renderer:+Renderer2
++++)+{+}

++++ngOnInit()+{
++++++this.appendComponent();
++++}

++++public+appendComponent()+{
++++++++const+factory+=++this.cfResolver.resolveComponentFactory(MyDynamicComponent);
++++++++const+componentRef+=+this.vcRef.createComponent(factory);
++++++++this.renderer.appendChild(
+++++++++++this.vcRef.element.nativeElement,
+++++++++++componentRef.injector.get(MyDynamicComponent).elRef.nativeElement
++++++++);
++++}
}|code-block|syntax|javascript|2872503|它添加了一个新的MyDynamicComponent实例作为子实例。要从该动态组件中获取要发送到appendChild的elRef，您可以在组件定义中执行以下操作：|2872504|@Component({
++selector:+'my-dynamic-component',
++template:+'...'
})
export+class+MyDynamicComponent+{
++constructor(public+elRef:+ElementRef)+{+}
}|2872505|您还需要将动态组件添加到模块中的entryComponents中，当然还需要将指令和动态组件添加到模块declarations中。|2872506|工作stackblitz+here|2872507|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/45174556/10142675|1|https://stackblitz.com/edit/angular-6yjcso-dynamic-child-component-proof-of-concept^0|B|B|0|0|B|L|0|0|8|I|1C|B|1O|5|0|0|G|F|1F|C|0|D|4|1|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|D|3|E|5|6|7|18|8|@$A|19|B|1A|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|1B|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1C|8|@$A|1D|B|1E|F|G]|$A|1F|B|1G|F|G]|$A|1H|B|1I|F|G]]|9|@]|C|$]]|$1|O|3|P|5|J|7|1J|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1K|8|@$A|1L|B|1M|F|G]|$A|1N|B|1O|F|G]]|9|@]|C|$]]|$1|S|3|T|5|6|7|1P|8|@]|9|@$A|1Q|B|1R|1|1S]]|C|$]]|$1|U|3|-4|5|6|7|1T|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]|12|$5|X|Y|Z|C|$10|13]]]]

<a href="https://stackoverflow.com/a/45174556/10142675">This answer</a> by @Magicaner helped me but is missing a few details to get it working.

In summary, yes you can add a new child component using <code>Renderer2.appendChild</code>. The directive would look like this:

<pre class="lang-js prettyprint-override"><code>@Directive({
 selector: '[myDynamicDirective]'
})
export class MyDynamicDirective implements OnInit {
 constructor(
 private cfResolver: ComponentFactoryResolver,
 public vcRef: ViewContainerRef,
 private renderer: Renderer2
 ) { }

 ngOnInit() {
 this.appendComponent();
 }

 public appendComponent() {
 const factory = this.cfResolver.resolveComponentFactory(MyDynamicComponent);
 const componentRef = this.vcRef.createComponent(factory);
 this.renderer.appendChild(
 this.vcRef.element.nativeElement,
 componentRef.injector.get(MyDynamicComponent).elRef.nativeElement
 );
 }
}
</code></pre>

It adds a new instance of <code>MyDynamicComponent</code> as a child. To get the <code>elRef</code> from that dynamic component to send to <code>appendChild</code> you can do this in the component definition:

<pre class="lang-js prettyprint-override"><code>@Component({
 selector: 'my-dynamic-component',
 template: '...'
})
export class MyDynamicComponent {
 constructor(public elRef: ElementRef) { }
}
</code></pre>

And also you need to add the dynamic component to <code>entryComponents</code> in the module, and of course add the directive and dynamic component to the module <code>declarations</code>.

Working stackblitz <a href="https://stackblitz.com/edit/angular-6yjcso-dynamic-child-component-proof-of-concept" rel="nofollow noreferrer">here</a>

Is there a way to insert dynamically a component as a child (not a sibling) of a DOM tag in Angular 2?

There are plenty of examples around there to insert a dynamic component as a sibling of a given <code>ViewContainerRef</code>'s tag, like (as of RC3):

<pre><code>@Component({
 selector: '...',
 template: '&lt;div #placeholder&gt;&lt;/div&gt;'
})
export class SomeComponent {
 @ViewChild('placeholder', {read: ViewContainerRef}) placeholder;

 constructor(private componentResolver: ComponentResolver) {}

 ngAfterViewInit() {
 this.componentResolver.resolveComponent(MyDynamicComponent).then((factory) =&gt; {
 this.componentRef = this.placeholder.createComponent(factory);
 });
 }
}
</code></pre>

But this generates a DOM similar to:

<pre><code>&lt;div&gt;&lt;/div&gt;
&lt;my-dynamic-component&gt;&lt;/my-dynamic-component&gt;
</code></pre>

Expected result:

<pre><code>&lt;div&gt;
 &lt;my-dynamic-component&gt;&lt;/my-dynamic-component&gt;
&lt;/div&gt;
</code></pre>

Using the <code>SomeComponent</code>'s <code>ViewContainerRef</code> has the same result, it is still inserting the generated component as a sibling, not a child. I would be okay with a solution where the template is empty and dynamic components are inserted in the template (within the component selector tag).

The DOM structure is very important when using libraries like ng2-dragula to drag from a list of dynamic components and <a href="https://github.com/valor-software/ng2-dragula#dragulamodel" rel="noreferrer">benefit from the model updates</a>. The extra div is in the list of draggable elements, but outside the model, breaking the drag &amp; drop logic.

Some say it is not possible (<a href="https://stackoverflow.com/questions/37185820/how-to-place-a-dynamic-component-in-a-container#comment63149054_37201171">c.f. this comment</a>), but it sounds like a very surprising limitation.

Angular2: Insert a dynamic component as child of a container in the DOM

容器

有没有办法将组件作为Angular 2中DOM标签的子(而不是兄弟)动态插入？有很多示例可以将动态组件作为给定ViewContainerRef的标记的兄弟项插入，例如(对于RC3)：@Component({ selector: '...', template: '<div #placeholder></div>'}...

问Angular2:将动态组件作为容器的子级插入到DOM中
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular2:将动态组件作为容器的子级插入到DOM中EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular2:将动态组件作为容器的子级插入到DOM中
EN