Angular 8: Использование сервиса для создания динамического компонента.Ошибка: не удается прочитать свойство 'createComponent' неопределенного - PullRequest
Новая
       54

Angular 8: Использование сервиса для создания динамического компонента.Ошибка: не удается прочитать свойство 'createComponent' неопределенного

0 голосов
/ 19 сентября 2019

Я пытаюсь использовать сервис для создания динамических компонентов.У меня не было проблем с созданием динамического компонента, когда код был в компоненте.Когда я перемещаю свой код в службу, я получаю ошибку о том, что createComponent не найден.

У меня есть вызов функции в 'ngAfterViewInit', большинство проблем возникало у людей, когда я искал решения.Я пытался выяснить, почему мой код не работает, когда я помещаю его в службу.Я также пытался сделать режиссера, но это не сработало.

Вот код в стеке блиц https://stackblitz.com/edit/angular-ikshag

Ниже указан код компонента и сервиса.

app.component 

import { GenService } from './gen.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {
  name = 'Angular';

 constructor(private gen: GenService) { }
  ngAfterViewInit() {
    this.gen.createComp("yo");
  }

}

service 

import { Injectable, ComponentFactoryResolver, ViewChild,ViewContainerRef } from '@angular/core';
import { ChildComponent } from './child/child.component';

@Injectable({
  providedIn: 'root'
})
export class GenService {

  @ViewChild('container', { static: true }) newsHost: ViewContainerRef; //this allow the targeting needed to add component


  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }


  createComp(message) {
    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(ChildComponent);
    let componentRef = this.newsHost.createComponent(componentFactory);//adds it to the screen

  }//end of bot reply

}

дочерний компонент по умолчанию, который говорит, что он работает.

1 Ответ

0 голосов
/ 20 сентября 2019

Это не так просто.Тема, которую вы читаете ( angular-dynamic-components ), довольно длинная.

Посмотрите на src/app/dialog/insertion.directive.ts, который затем вызывается в ng-шаблоне с помощью его селектора (тогда каквы использовали селектор container, который не отображается ни на одну угловую директиву).
В эту директиву введено viewContainerRef, что используется для доступа к методу createComponent.ViewChild также довольно сложен: @ViewChild(InsertionDirective) insertionPoint: InsertionDirective.

Итак, вам нужно выполнить следующие шаги:

  1. Создать директиву, как указано в блоге
  2. Используйте его селектор в теге <ng-template>
  3. Обновите свой @ViewChild, используя класс директивы
  4. Доступ viewContainerRef вашей директивы (которая должна быть публичной), чтобы использовать метод createComponent
...