Уничтожить экземпляр компонента после создания из службы

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

Ниже приведен код моего служебного файла.

@Injectable()
export class CreateComponentService implements OnDestroy {
  private rootViewContainer: ViewContainerRef;
  private componentFactory: ComponentFactory<any>;
  private componentReference;
  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  setRootViewContainerRef(view: ViewContainerRef): void {
    this.rootViewContainer = view;
  }

  createComponent(content, type) {
    this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(type);
    this.componentReference = this.rootViewContainer.createComponent(this.componentFactory);
    this.componentReference.instance.contentOnCreate(content);
  }

  ngOnDestroy() {
    // Destroy components to avoide memory leaks
    this.componentReference.destroy();
  }
}

В Component.ts

constructor(private service: CreateComponentService) {}

      data.forEach(response => {
        this.service.createComponent(response, type);
      });

Пожалуйста, покажите мне лучший способ уничтожить экземпляр компонента


angular angular-dynamic-components
person stack s    schedule 21.03.2019    source источник
comment
Зачем вам вызывать событие destroy, когда вы что-то создаете? Насколько я понимаю ваш код, эталонный компонент будет уничтожен только при уничтожении службы CreateComponent   -  person Al-un    schedule 21.03.2019
comment
Итак, я создаю компонент внутри цикла на основе объекта данных. Для каждого типа данных я создаю компонент. Мне нужно уничтожить экземпляр компонента после создания представления. вот почему я использовал ngOnDestroy .   -  person stack s    schedule 21.03.2019
comment
Вы не уничтожаете службу, поэтому хук ngOnDestroy никогда не вызывается. Если вы хотите уничтожить компонент, обрабатываемый службой, вам понадобится метод destroyComponent и вызовите его соответствующим образом.   -  person Al-un    schedule 21.03.2019
comment
Я создал проект stackblitz, могу проверить и сказать мне, как можно уничтожить компонент stackblitz .com/edit/dynamic-component-example-5o8pz8   -  person stack s    schedule 21.03.2019
comment
Извините, я до сих пор не понимаю, зачем и когда нужно уничтожать созданные компоненты. Либо SadComponent, либо HappyComponent ==> вы говорите об уничтожении этих компонентов, верно?   -  person Al-un    schedule 21.03.2019
comment
да. Я создал эти два компонента. После его рендеринга мне нужно уничтожить экземпляр. Но вид должен сохраняться   -  person stack s    schedule 21.03.2019

Ответы (1)


arrow_upward
0
arrow_downward

Вы не уничтожаете службу явно, и метод службы onDestroy не будет вызываться.

Вы можете попробовать отсоединить представления от дерева обнаружения изменений, что похоже на то, что вам нужно,

private insertComponent(componentType): void {
    const factory = this.factoryResolver.resolveComponentFactory(componentType);
    var containerRef = this.rootViewContainer.createComponent(factory);
    // always get the most recently appended node
    var viewRef = this.rootViewContainer.get(this.rootViewContainer.length - 1);
    viewRef.detach();
    containerRef = null;
}

containerRef в конце концов будет собран мусор. И поскольку вы отсоединяете представление, оно будет вести себя как статическое содержимое. Обратите внимание, что если вы уничтожите containerRef, соответствующий вид/html также будет уничтожен.

обновление: демо https://stackblitz.com/edit/dynamic-component-example-swrj8j?file=src/app/service-based/factory.service.ts

person ABOS    schedule 21.03.2019
comment
С приведенными выше решениями я не могу видеть, как создается контент. Нет ошибок в консоли - person stack s; 21.03.2019