В чем разница между декларациями и entryComponents

У меня это в моем приложении .module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { HttpModule, Http } from '@angular/http';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { EliteApi } from '../shared/shared';
import { MyApp } from './app.component';
import { MyTeams, Tournaments, TeamDetails, Teams, TeamHome, Standings } from '../pages/pages';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
    declarations: [
        MyApp,
        MyTeams,
        TeamDetails,
        Tournaments,
        Teams,
        TeamHome,
        Standings
    ],
    imports: [
        BrowserModule,
        IonicModule.forRoot(MyApp),
        HttpModule
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        MyTeams,
        TeamDetails,
        Tournaments,
        Teams,
        TeamHome,
        Standings
    ],
    providers: [
        HttpModule,
        StatusBar,
        SplashScreen,
        { provide: ErrorHandler, useClass: IonicErrorHandler },        
        EliteApi
    ]
})
export class AppModule { }

В настоящий момент мои declarations и entryComponents оба одинаковы. Они содержат всю страницу/компоненты, которые я создал для своего приложения. Если я удалю любую запись из любого из свойств, я получаю ошибку в angular2.

Мой вопрос в том, что они всегда одинаковы, а какие нужны эти свойства? Я думаю, что я определенно пропустил здесь кое-что. Когда entryComponents и declaractions будут отличаться друг от друга?

Ответ 1

Массив entryComponents используется для определения только тех компонентов, которые не найдены в html и динамически создаются с помощью ComponentFactoryResolver. Angular нуждается в этой подсказке, чтобы найти их и скомпилировать. Все остальные компоненты должны быть перечислены в массиве объявлений.

Вот документация на угловой сайт

Ответ 2

Добавление к тому, что @Julia ответила на этот вопрос. Я хотел бы добавить вариант использования модальных.

Допустим, у вас есть компонент, который называется ModalComponent. Чтобы сделать его более пригодным для повторного использования, вы должны передать имя компонента и ожидать, что этот компонент будет отображаться внутри ModalComponent *.

Пример module.ts будет выглядеть примерно так:

import:[ModalModule],  // As a best practice, we can create Modal as a separate Feature
entryComponent : [TheCompYouWantToRenderInsideModalComponent]

Мы должны передать TheCompYouWantToRenderInsideModalComponent как entryComponent поскольку этот компонент не будет присутствовать при написании кода веб-сайта (т. TheCompYouWantToRenderInsideModalComponent В любом HTML файле не будет селектора TheCompYouWantToRenderInsideModalComponent). Мы передадим этот component в Modal, а затем он будет отображаться динамически, как и при открытии модального режима. Что-то вроде ниже:

onSomeButtonClickToOpenModal(){
     this.modalService.openModal(TheCompYouWantToRenderInsideModalComponent);
}

_{* В ModalModule мы создадим сервис для использования ComponentFactoryResolver и возьмем TheCompYouWantToRenderInsideModalComponent качестве аргумента.}_{Позже мы можем вызвать функцию (назовите ее openModal(componentType: ComponentType)), которая будет открываться и визуализироваться с использованием ComponentFactoryResolver}

Side Примечание: entryComponent также будет играть важную роль в угловых V6 elements имеют для той же цели.

Ответ 3

Короче:

"Настоящей" причиной существования entryComponents является entryComponents дерева, в то время как declarations существуют главным образом для инкапсуляции модулей. Так что они даже не сопоставимы. Если бы нас не волновало расшатывание деревьев, мы были бы хороши с объявлениями в качестве единого источника для обоих.

Более длинный ответ

Все components которые вы создали в своем module, не попадают в окончательный комплект. Скорее, только компоненты, которые были объявлены в template с использованием selectors ИЛИ components которые были добавлены в массив entryComponents (вами или платформой).

Вы хотите добавить компонент при его динамическом создании, например, с использованием ComponentFactoryResolver как указано в принятом ответе. Или Framework может добавить компонент, когда вы объявляете их в массиве Route или во время другого императивного создания.

Из официальных документов:

Фактически, многие библиотеки объявляют и экспортируют компоненты, которые вы никогда не будете использовать. Например, библиотека дизайна материалов будет экспортировать все компоненты, потому что она не знает, какие из них вы будете использовать. Однако вряд ли вы будете использовать их все. Для тех, на кого вы не ссылаетесь, шейкер дерева удаляет эти компоненты из окончательного пакета кода.

Если компонент не является компонентом ввода и не найден в шаблоне, шейкер дерева выбросит его. Поэтому лучше всего добавлять только те компоненты, которые действительно являются начальными компонентами, чтобы поддерживать ваше приложение как можно более аккуратным.

Ответ 4

Компонент ввода - это любой компонент, который Angular обязательно загружает, что означает, что вы не ссылаетесь на него в шаблоне по типу. Например:

@Component({
  selector: 'app-entry-component', // <== component select tags
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppEntryComponent {
  // <== Component Class
}

добавьте этот селектор в компонент, который вы используете

<app-entry-component></app-entry-component>

добавить этот компонент в модуль приложения

const routes: Routes = [
  {
    path: '',
    component: ComponentClassName,
    children: []
  }
]

наконец

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [
    AppEntryComponent
  ]
})
export class AppModule { }