Angular ngModule'da entryComponents nedir?


131

Bağlı olan bir Ionicuygulama ( 2.0.0-rc0) üzerinde çalışıyorum angular 2. Böylece yeni giriş ngModulesdahildir. app.module.ts.Aşağıya ekliyorum .

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { Users } from '../pages/users/users';

@NgModule({
  declarations: [
    MyApp,
    Users
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Users
  ]
})
export class AppModule {}

entryComponentsBurada ne yapıyorsun? Componentszaten tanımlanmıştır declarations. Öyleyse onları tekrar etmeye ne gerek var? Buraya bir bileşen dahil etmezsem ne olur?


4
Angular, "ağaç sarsıntısı" nı etkinleştirmek için entryComponents kullanır, yani içinde declaredbulunan ngModuleancak hiç kullanılmayan tüm bileşenleri derlemek yerine yalnızca projede gerçekten kullanılan bileşenleri derler . angular.io/docs/ts/latest/cookbook/... entrycomponents -
Samar

Yanıtlar:


155

Bu, kullanılarak eklenen dinamik olarak eklenen bileşenler içindir ViewContainerRef.createComponent(). Bunları eklemek entryComponents, çevrimdışı şablon derleyicisine bunları derlemesini ve onlar için fabrikalar oluşturmasını söyler.

Rota yapılandırmalarında kaydedilen bileşenler de otomatik entryComponentsolarak eklenir , çünkü router-outletaynı zamanda ViewContainerRef.createComponent()DOM'a yönlendirilmiş bileşenler eklemek için de kullanılır .

Çevrimdışı şablon derleyici (OTC) yalnızca gerçekte kullanılan bileşenleri oluşturur. Bileşenler doğrudan şablonlarda kullanılmazsa, OTC derlenmeleri gerekip gerekmediğini bilemez. EntryComponents ile, OTC'ye bu bileşenleri çalışma zamanında mevcut olacak şekilde derlemesini söyleyebilirsiniz.

Giriş bileşeni nedir? (Angular.io)

NgModule belgeleri (angular.io)

Bu bileşen tanımlandığında derlenmesi gereken bileşenleri de tanımlar. Burada listelenen her bileşen için, Angular bir ComponentFactory oluşturacak ve bunu ComponentFactoryResolver'da saklayacaktır.

Dinamik olarak eklenen bir bileşeni listelemezseniz, entryComponentseksik bir fabrika hakkında bir hata mesajı alırsınız çünkü Angular bir tane oluşturmamış olacaktır.

Ayrıca bkz. Https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html


12
açıkçası% 100 doğru cevabını biliyorum ama benim için daha hızlı geçti, lütfen biraz daha detaylandırır mısınız?
Pankaj Parkar

26
Neyin belirsiz olduğunu söylemek zor. Çevrimdışı şablon derleyici (OTC) yalnızca gerçekte kullanılan bileşenleri oluşturur. Bileşenler doğrudan şablonlarda kullanılmazsa, OTC derlenmeleri gerekip gerekmediğini bilemez. İle entryComponentsOTC'ye bu bileşenleri çalışma zamanında hazır olacak şekilde derlemesini söyleyebilirsiniz.
Günter Zöchbauer


2
Yani genel olarak, eğer bileşen içinde listelenmişse, içinde declarationsde listelenmelidir entryComponents, değil mi?
omnomnom

1
yalnızca createComponentkodunuza dinamik olarak bir bileşen eklenirse veya örneğin bileşen eklemek için thod API kullanan yönlendirici gibi.
Günter Zöchbauer

30

Angular belgelerinden daha iyi bir açıklama alamazsınız : giriş bileşenleri ve ngmodule-faq .

Ve aşağıda açısal belgelerden açıklama bulunmaktadır.

Giriş bileşeni, Tipe göre açısal olarak zorunlu olarak yüklenen herhangi bir bileşendir.

Seçicisi aracılığıyla bildirimsel olarak yüklenen bir bileşen, bir giriş bileşeni değildir.

Çoğu uygulama bileşeni bildirimsel olarak yüklenir. Angular, şablondaki öğeyi bulmak için bileşenin seçicisini kullanır. Daha sonra bileşenin HTML temsilini oluşturur ve onu seçilen öğede DOM'a ekler. Bunlar giriş bileşenleri değildir.

Birkaç bileşen yalnızca dinamik olarak yüklenir ve bir bileşen şablonunda asla referans gösterilmez.

Önyüklenmiş kök AppComponent, bir giriş bileşenidir. Doğru, seçici, index.html'deki bir öğe etiketiyle eşleşir. Ancak index.htmlbir bileşen şablonu değildir ve AppComponentseçici, herhangi bir bileşen şablonundaki bir öğeyle eşleşmez.

Açısal, AppComponent'i dinamik olarak yükler çünkü @NgModule.bootstrapya türe göre listelenir ya da modülün ngDoBootstrap yöntemiyle zorunlu olarak artırılır.

Tesisat tanımlarındaki bileşenler de giriş bileşenleridir. Bir yol tanımı, türüne göre bir bileşene atıfta bulunur. Yönlendirici, yönlendirilmiş bir bileşenin seçicisini yok sayar (eğer varsa) ve bileşeni dinamik olarak bir RouterOutlet.

Derleyici, bu girdi bileşenlerini diğer bileşen şablonlarında arayarak keşfedemez. Bunları entryComponentslisteye ekleyerek anlatmalısınız .

Angular, aşağıdaki bileşen türlerini modüllere otomatik olarak ekler entryComponents:

  • @NgModule.bootstrapListedeki bileşen .
  • Yönlendirici yapılandırmasında başvurulan bileşenler.

Zararsız olmasına rağmen, bu bileşenlerden açıkça bahsetmek zorunda değilsiniz.


Şu anda açısal dokümanlar mevcut değil, bu yüzden bunun için çok teşekkür ederim!
Caelum

Bu, rota yapılandırmalarındaki bileşenlerin otomatik olarak entryComponents'a eklendiğinden bahsetmiyor gibi görünüyor (bu nedenle genellikle onu tanımlamanız gerekmez).
Connor

1
Bir bileşen olarak kullanılacak bir bileşen oluşturursak EntryComponent, selectorniteliği kaldırmalı mıyız ? (kullanılmayacağından beri)
Ronan

24

Diğer cevaplar bundan bahsediyor ancak temel özet:

  • bir Bileşen bir html şablonunun içinde KULLANILMADIĞINDA gereklidir <my-component />
  • Örneğin, Açısal Malzeme iletişim kutusu bileşenlerini kullanırken, bileşeni dolaylı olarak kullanırsınız.

Malzeme iletişim kutusu bileşenleri şablonun değil TS kodunun içinde oluşturulur:

    const dialogRef = this.dialog.open(MyExampleDialog, { width: '250px' });
  }

Bu, onu bir entryComponent olarak kaydetmenizi gerektirir:

  • entryComponents: [MyExampleDialog]

Aksi takdirde bir hata alırsınız:

  • ERROR Error: No component factory found for MyExampleDialog. Did you add it to @NgModule.entryComponents?

2
En iyi açıklama burada.
nop

3

EntryComponents dizisi, yalnızca html'de bulunmayan ve dinamik olarak oluşturulan bileşenleri tanımlamak için kullanılır. Angular, giriş bileşenini bulmak ve bunları derlemek için bu ipucunu gerektirir.

İki ana giriş bileşeni türü vardır:

  • Önyüklenmiş kök bileşeni.
  • Bir tesisat tanımında belirlediğiniz bir bileşen.

Giriş bileşenleri hakkında daha ayrıntılı bilgi için lütfen angular.io https://angular.io/guide/entry-components adresine bakın.


1

Hakkında Biraz Arka Plan entryComponent

entryComponentherhangi bir bileşendir zorunlu olarak açısal yükler. Yol tanımlarının entryComponentiçinde NgModuleveya içinde önyükleyerek bildirebilirsiniz .

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent] // bootstrapped entry component
})

Belgeler aşağıda yazıyor

İki tür bileşenin aksine, şablona dahil edilen ve bildirime dayalı bileşenler vardır. Ek olarak, zorunlu olarak yüklediğiniz bileşenler vardır; yani giriş bileşenleri.

Şimdi özel sorunuzu cevaplamak için entryComponents

Dosyada entryComponentsdizi var @NgModule. Bunu, entryComponentsbileşen kullanılarak önyüklenmişse eklemek için kullanabilirsiniz ViewContainerRef.createComponent().

Yani bileşenleri dinamik olarak oluşturuyorsunuz, önyükleme yoluyla veya şablonda değil.

const componentFactory = this.componentFactoryResolver.resolveComponentFactory(myComp.component);
const viewContainerRef = this.compHost.viewContainerRef;
viewContainerRef.clear();
const componentRef = viewContainerRef.createComponent(componentFactory);

0

Bu özelliğin kullanımdan kaldırılmasına izin veren Ivy sayesinde Angular 9 entryComponents artık gerekli değildir ve dolayısıyla modül bildirimlerinden çıkarılabilir.

Kullanımdan kaldırılan API'ler ve özellikler - entryComponentsve ANALYZE_FOR_ENTRY_COMPONENTSartık gerekli değil

Önceden tanımdaki entryComponentsdizi NgModule, derleyiciye hangi bileşenlerin dinamik olarak oluşturulup ekleneceğini söylemek için kullanılıyordu. Ivy ile bu artık bir gereklilik değildir ve entryComponentsdizi mevcut modül bildirimlerinden çıkarılabilir. Aynısı ANALYZE_FOR_ENTRY_COMPONENTSenjeksiyon jetonu için de geçerlidir .

Açısal sarmaşık

Ivy, Angular'ın yeni nesil derleme ve işleme hattının kod adıdır. Angular'ın sürüm 9 sürümüyle birlikte, yeni derleyici ve çalışma zamanı talimatları, View Engine olarak bilinen eski derleyici ve çalışma zamanı yerine varsayılan olarak kullanılır.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.