Angular 2 将组件动态附加到 DOM 或模板

Posted 2023-02-23

【中文标题】Angular 2 将组件动态附加到 DOM 或模板

【英文标题】：Angular 2 append Component dynamic to DOM or template

【发布时间】：2016-04-23 16:22:50

【问题描述】：

如果调用 show()，我计划向 DOM 添加一个动态组件。 我知道有一个使用 ngIf 或 [hidden] 的解决方案可以隐藏它并将其用作指令，但我不喜欢这个解决方案，因为我不想在我的 html 中声明它。

  import Component from 'angular2/core';
  import InfoData from '../../model/InfoData';

  @Component(
    selector: 'Info',
    templateUrl: './components/pipes&parts/info.html',
    styleUrls: ['./components/pipes&parts/info.css']
  )

  export class Info
    infoData: InfoData;

    public show(infoData: InfoData) 
      this.infoData= infoData;
      document.body.appendChild(elemDiv); <----- Here?
    
  

然后我将其声明为 Provider，以便我可以调用 show()。

  import Component from 'angular2/core';
  import Info from './components/pipes&parts/Info';

  @Component(
    selector: 'Admin',
    templateUrl: './Admin.html',
    styleUrls: ['./Admin.css'],
    directives: [Info],
    providers: [Info]
  )

  export class Admin 
    constructor(private info: Info) 
    info.show(); <---- append the Info Element to DOM
  

【参考方案1】：

更新

使用ViewContainerRef.createComponent()

https://angular.io/guide/dynamic-component-loader https://angular.io/api/core/ViewContainerRef#createComponent

有关完整示例，请参阅Angular dynamic tabs with user-click chosen components

原创

DynamicComponentLoader 早就被删除了

你可以使用DynamicComponentLoader来达到这个目的，但是它有点麻烦并且有一些与绑定相关的问题。

另见：

http://www.syntaxsuccess.com/viewarticle/loading-components-dynamically-in-angular-2.0 DynamicComponentLoader breaks Data binding DynamicComponentLoader does not support inputs or outputs Initial Changedetection not working with DynamicComponentLoader Angular2: Two-way data binding on component dynamically inserted using DynamicComponentLoader How to provide data to a @Component through DynamicComponentLoader? Angular2: Creating child components programmatically

【讨论】：

你能看看这个问题吗，***.com/questions/47655224/…。

哦，太好了，你提供新链接的速度比我快?

【参考方案2】：

我认为您不需要将Info 组件作为提供者提供给其他组件。我不确定它是否有效。您可以利用Query 和QueryView 来引用另一个组件中使用的组件：

@Component(
  selector: 'Admin',
  templateUrl: './Admin.html',
  styleUrls: ['./Admin.css'],
  directives: [Info]
)
export class Admin
  constructor(private @Query(Info) info: QueryList<Info>) 
    info.first().show(); <---- append the Info Element to DOM
  

您可以按照 Günter 的建议，使用 DynamicComponentLoader 动态添加此组件，而不是在 Info 组件中添加元素：

@Component(
  selector: 'Info',
  templateUrl: './components/pipes&parts/info.html',
  styleUrls: ['./components/pipes&parts/info.css']
)

export class Info
      infoData: InfoData;

  public show(infoData: InfoData) 
    this.infoData= infoData;
    // No need to add the element dynamically
    // It's now part of the component template
    // document.body.appendChild(elemDiv); <----- Here?
  


@Component(
  selector: 'Admin',
  //templateUrl: './Admin.html',
  // To show where the info element will be added
  template: `
    <div #dynamicChild>
      <!-- Info component will be added here -->
    </div>
  `,
  styleUrls: ['./Admin.css'],
  directives: [Info]
)
export class Admin
  constructor(private dcl: DynamicComponentLoader, private eltRef:ElementRef) 
    this._dcl.loadIntoLocation(Info, this._el, 'dynamicChild')
        .then(function(el) 
          // Instance of the newly added component
        );
  

希望对你有帮助 蒂埃里

【讨论】：

DynamicComponentLoader 现已弃用 :(

@NoémiSalaün 是的，但 Günter 的回答可能会让您感兴趣：***.com/questions/36325212/… ;-)