Angular 5: отложенная загрузка компонента без маршрутизации

Question

В моем веб-приложении у меня есть всплывающее окно «Общие положения и условия», которое открывается по ссылке в нижнем колонтитуле (так что это основной компонент).Всплывающее окно состоит из нескольких вкладок, каждая из которых представляет собой довольно большой файл шаблона.

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

Answer 1

Вы можете подождать, пока пользователь нажмет на ссылку, и как только произойдет событие Click, загрузите необходимый компонент в представлении.Что нужно иметь в виду:

1. Вам необходимо определить местозаполнитель для компонента в представлении.

2. Компонент условий и положений должен быть определен как Компонент начального уровня для его модуля или модуля, в котором он используется.

    entryComponents: [
       ChildComponent
     ],
   

3. Обязательно обращайтесь к заполнителю в своем компоненте и динамически присоединяйте компонент условий и положений.

     <div>
         <ng-template #viewContainerRef></ng-template>
      </div>
   

и

@ViewChild('viewContainerRef', { read: ViewContainerRef }) VCR: ViewContainerRef;

и динамическое создание компонента:

createComponent() {

    let componentFactory = this.CFR.resolveComponentFactory(ChildComponent);
    let componentRef: ComponentRef<ChildComponent> = this.VCR.createComponent(componentFactory);
    let currentComponent = componentRef.instance;

    currentComponent.selfRef = currentComponent;
  // to track the added component, you can reuse this index to remove it later
    currentComponent.index = ++this.index; 

    // providing parent Component reference to get access to parent class methods
    currentComponent.compInteraction = this;

}

здесь есть пример: https://add -or-remove-dynamic-component-parent-child.stackblitz.io