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

2022-01-21 00:00:00 javascript components angular

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

I'm planning to add a component dynamic to the DOM if show() is called. I know there is a solution with ngIf or [hidden] to hide it and use it as a directive, but I'm not a fan of this solution because I don't want to declare it in my 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?
    }
  }

然后我将其声明为提供程序，以便我可以调用 show().

and then I declare this as a Provider so i can call 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
  }

推荐答案

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

I don't think that you need to provide the Info component as providers to the other component. I'm not sure that it even works. You can leverage Query and QueryView to reference components used in another one:

@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 组件中添加元素:

Instead of adding the element within the Info component, you can dynamically add this component using the DynamicComponentLoader as suggested by Günter:

@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
        });
  }
}

希望对你有帮助蒂埃里

相关文章