web-dev-qa-db-fra.com

Angular 2 append Component dynamic to DOM or template

Je prévois d'ajouter un composant dynamique au DOM si show () est appelé. Je sais qu'il existe une solution avec ngIf ou [hidden] pour la cacher et l'utiliser comme directive, mais je ne suis pas fan de cette solution car je ne veux pas la déclarer dans mon 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?
    }
  }

puis je déclare cela en tant que fournisseur afin que je puisse appeler 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
  }
javascriptcomponentsangular
12
user3369579

Je ne pense pas que vous ayez besoin de fournir le composant Info en tant que fournisseurs à l'autre composant. Je ne suis pas sûr que cela fonctionne même. Vous pouvez utiliser Query et QueryView pour référencer les composants utilisés dans un autre:

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

Au lieu d'ajouter l'élément dans le composant Info, vous pouvez ajouter dynamiquement ce composant en utilisant le DynamicComponentLoader comme suggéré par 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
        });
  }
}

J'espère que cela vous aide, Thierry

6
Thierry Templier

[~ # ~] mise à jour [~ # ~]

Utilisez ViewContainerRef.createComponent()

Pour un exemple complet, voir Onglets dynamiques angulaires avec les composants choisis par l'utilisateur

[~ # ~] original [~ # ~]

DynamicComponentLoader a été supprimé il y a longtemps

Vous pouvez utiliser DynamicComponentLoader à cet effet, mais c'est un peu lourd et a quelques problèmes liés aux liaisons.

Voir également:

7
Günter Zöchbauer