Detaillierte Einführung des Angular2 NgModel-Moduls

Dieser Artikel bietet Ihnen eine detaillierte Einführung in das Angular2 NgModel-Modul. Ich hoffe, dass er Ihnen als Referenz dienen wird.

angular2 NgModel module

In Angular2 bezieht sich ein Modul auf eine Klasse, die mit @NgModule dekoriert ist. @NgModule verwendet ein Metadatenobjekt, um Angular mitzuteilen, wie der Code kompiliert und ausgeführt werden soll. Ein Modul kann intern Komponenten, Anweisungen und Pipes enthalten, und ihre Zugriffsrechte können als öffentlich deklariert werden, sodass Komponenten externer Module darauf zugreifen und sie verwenden können. Wir können die Funktionalität unserer Anwendung auch durch die Definition von Submodulen erweitern.

NgModule's API

interface NgModule {
     // providers: 这个选项是一个数组,需要我们列出我们这个模块的一些需要共用的服务
     //            然后我们就可以在这个模块的各个组件中通过依赖注入使用了.
    providers : Provider[]
     // declarations: 数组类型的选项, 用来声明属于这个模块的指令,管道等等.
     //               然后我们就可以在这个模块中使用它们了.
    declarations : Array<Type<any>|any[]>
     // imports: 数组类型的选项,我们的模块需要依赖的一些其他的模块,这样做的目的使我们这个模块
     //          可以直接使用别的模块提供的一些指令,组件等等.
    imports : Array<Type<any>|ModuleWithProviders|any[]>
     // exports: 数组类型的选项,我们这个模块需要导出的一些组件,指令,模块等;
     //          如果别的模块导入了我们这个模块,
     //          那么别的模块就可以直接使用我们在这里导出的组件,指令模块等.
    exports : Array<Type<any>|any[]>
    // entryComponents: 数组类型的选项,指定一系列的组件,这些组件将会在这个模块定义的时候进行编译
    //                  Angular会为每一个组件创建一个ComponentFactory然后把它存储在ComponentFactoryResolver
    entryComponents : Array<Type<any>|any[]>
    // bootstrap: 数组类型选项, 指定了这个模块启动的时候应该启动的组件.当然这些组件会被自动的加入到entryComponents中去
    bootstrap : Array<Type<any>|any[]>
    // schemas: 不属于Angular的组件或者指令的元素或者属性都需要在这里进行声明.
    schemas : Array<SchemaMetadata|any[]>
    // id: 字符串类型的选项,模块的隐藏ID,它可以是一个名字或者一个路径;用来在getModuleFactory区别模块,如果这个属性是undefined
    //     那么这个模块将不会被注册.
    id : string
 }

Einführung in gängige APIs

Die Hauptattribute von NgModule sind wie folgt:

Deklarationen: eine Liste von Komponenten/Anweisungen/Pipes innerhalb des Moduls, Deklarationen Schauen Sie sich die internen Mitglieder dieses Moduls an und deklarieren Sie sie, bevor Sie die entsprechenden Komponenten verwenden können.

Anbieter: Geben Sie die Dienste an, die auf der Stammebene der Anwendung verwendet werden müssen. (In Angular2 gibt es keinen Dienst auf Modulebene, und alle in NgModule deklarierten Anbieter sind im Abhängigkeitsinjektor auf Stammebene registriert.)

Importe: Importieren Sie andere Module sowie die von anderen bereitgestellten Komponenten, Anweisungen und Pipes Module usw. können in Komponenten dieses Moduls verwendet werden. Nach dem Import von CommonModule können Sie beispielsweise NgIf, NgFor und andere Anweisungen verwenden.

Exporte: Wird verwendet, um zu steuern, welche internen Mitglieder einer externen Nutzung ausgesetzt sind. Das Importieren eines Moduls bedeutet nicht, dass die vom importierten Modul innerhalb des Moduls bereitgestellten öffentlichen Mitglieder automatisch importiert werden. Es sei denn, das importierte Modul schreibt sein intern importiertes Modul in Exporte.

Bootstrap: Normalerweise die Root-Komponente für den App-Start, normalerweise gibt es nur eine Komponente. Komponenten im Bootstrap werden automatisch in EntryComponents platziert.

entryCompoenents: Komponenten, auf die in der Vorlage nicht verwiesen wird. Dieses Attribut wird im Allgemeinen nur von ng selbst verwendet. Normalerweise fügt die Bootstrap-Komponente oder Routing-Komponente von ng automatisch die Bootstrap- und Routing-Komponenten ein. Dieses Attribut wird nur verwendet, wenn die Komponente dynamisch und ohne Routing zum Dom hinzugefügt wird.

Untermodule

Da das Programm wächst, kann ein einzelnes Root-Modul die Verantwortlichkeiten nicht mehr klar aufteilen. Zu diesem Zeitpunkt kann das Feature-Modul eingeführt werden. Feature-Module werden auf die gleiche Weise wie Root-Module erstellt und alle Module teilen sich einen Laufzeitkontext und einen Abhängigkeitsinjektor.

Die Hauptunterschiede zwischen den Verantwortlichkeiten von Funktionsmodulen und Root-Modulen sind wie folgt:

Der Zweck des Root-Moduls besteht darin, die App zu starten, und der Zweck des Funktionsmoduls besteht darin, sie zu erweitern die App

Das Funktionsmodul kann je nach Bedarf bestimmte Implementierungen verfügbar machen oder ausblenden

Eine weitere modulbezogene Technologie von Angular2 ist Lazy Loading. Standardmäßig packt Angular2 den gesamten Code in eine Datei, um die reibungslose Ausführung der Anwendung zu verbessern. Wenn es sich jedoch um eine App handelt, die auf einem Mobilgerät ausgeführt wird, kann das Laden einer großen Datei zu langsam sein, daher bietet rc5 eine Lazy-Loading-Methode.

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

export const routes: Routes = [
  { path: '', redirectTo: 'contact', pathMatch: 'full'},
  { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' }, // 可以延迟加载子模块，子模块的结构和父模块一样，它会去加载子模块中的Routes配置，并跳转对应的组件中去。
  { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

Unter diesen gibt „path“ den Pfad an, „loadChildren“ gibt die Verwendung von Lazy Loading an, „app/crisis/crisis.module#CrisisModule“ gibt den Pfad des Moduls und den Namen des Moduls an.

[Verwandte Empfehlungen: Winkel-Video-Tutorial]

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung des Angular2 NgModel-Moduls. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!