Вопрос:

ViewContainerRef не загружает компонент в DOM

javascript angularjs angular

560 просмотра

2 ответа

3947 Репутация автора

@Component({
  selector: 'my-cmp',
  template: `
  <div #target></div>
  `
})
export class MyCmp {
@ViewChild('target', {read: ViewContainerRef}) target : ViewContainerRef;

render() {
    let cmp = Component(metadata)(type);
    this.componentResolver.resolveComponent(cmp).then(factory => {
      let component = this.target.createComponent(factory, 0, null, null);
    });
  }
}

Я пытаюсь загрузить компонент в ViewContainerRef. Во всей документации говорится, что, как только компонент создан, он автоматически загружается в DOM (где он ViewChildесть). Но этого не происходит. Почему? Пожалуйста помоги.

Автор: dopatraman Источник Размещён: 22.08.2016 09:04

Ответы (2)


0 плюса

12709 Репутация автора

Не уверен, что код, который вы добавили, завершен или является его частью, я не вижу, чтобы ComponentResolver вставлялся в ваш конструктор, также это может быть опечатка, но resolveComponentтогда блок не закрывается (отсутствует )).

 import { Component, ViewChild, ViewContainerRef, ComponentResolver }  from '@angular/core';

 @Component({
   selector: 'my-test',
   template: `
    Test Component
   `
 })
 export class TestComponent {}

 @Component({
   selector: 'my-app',
   template: `<h3 class="title">Basic Angular 2</h3>
   <div #target></div>
   `
 })
 export class AppComponent {
   @ViewChild('target', {read: ViewContainerRef}) target : ViewContainerRef;

   constructor(private componentResolver: ComponentResolver){
     this.render();
   }

   render = () =>  {
     // include app specific logic to get ComponentType
     //  let cmp = Component(metadata)(type);
     this.componentResolver.resolveComponent(TestComponent).then(factory => {
      let component = this.target.createComponent(factory, 0, null, null);
     });
    }
  }

Вот Плункер!

Надеюсь это поможет!!

Автор: Madhu Ranjan Размещён: 22.08.2016 11:53

0 плюса

377638 Репутация автора

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Dynamicaly Add Elements</h2>
      <button (click)="addItem()">add hello</button>
      <div #placeholder></div>
    </div>
  `,
  entryComponents: [HelloComponent]
})
export class App {
  @ViewChild('placeholder', {read: ViewContainerRef}) viewContainerRef;
  private componentFactory: ComponentFactory<any>;

  constructor(componentFactoryResolver: ComponentFactoryResolver, compiler: Compiler) {
    this.componentFactory = componentFactoryResolver.resolveComponentFactory(HelloComponent);
    //this.componentFactory = compiler.compileComponentSync(HelloComponent);
  }

  addItem () {
    this.viewContainerRef.createComponent(this.componentFactory, 0);
  }
}

Пример плунжера

Автор: Günter Zöchbauer Размещён: 23.08.2016 04:35
Вопросы из категории :
32x32