Question

我已经看到了一些如何在网络和网络周围执行此操作的示例，但是当我尝试它时，我的子组件作为目标组件的对等方插入到DOM中。这是我正在使用的标记：

<div #target></div>
<button (click)="AddTile()">Add Tile</button>

这是父组件代码：

import { Component, ComponentFactoryResolver, ViewContainerRef, ViewChild }     from '@angular/core';
import { TileComponent } from './tile/tile.component';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})

 export class AppComponent{
  title = 'app works!';

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

  constructor(private componentFactoryResolver: ComponentFactoryResolver, private viewContainerRef: ViewContainerRef) {}

  AddTile() {
    const factory =   this.componentFactoryResolver.resolveComponentFactory(TileComponent);
    const res = this.target.createComponent(factory);
  }
}

此代码的输出为：

<div #target></div>
<tile-component></tile-component>
<tile-component></tile-component>

预期输出为：

<div #target>
  <tile-component></tile-component>
  <tile-component></tile-component>
</div>

Answer 1

您可能希望使用<div id="ist" onclick="addClass(this)"> Something </div>作为目标，这样就不会在DOM中留下任何元素。因此，您只需使用ng-container中的组件：

div

动态插入角度分量作为另一个组件的子代

1 个答案: