docs(API): 翻译 ng_module

This commit is contained in:
Zhicheng Wang 2018-08-31 14:04:55 +08:00
parent f7541dda47
commit 4fc343f796
1 changed files with 163 additions and 23 deletions

View File

@ -16,11 +16,17 @@ import {TypeDecorator, makeDecorator} from '../util/decorators';
/**
* Represents the expansion of an `NgModule` into its scopes.
*
* `NgModule`
*
* A scope is a set of directives and pipes that are visible in a particular context. Each
* `NgModule` has two scopes. The `compilation` scope is the set of directives and pipes that will
* be recognized in the templates of components declared by the module. The `exported` scope is the
* set of directives and pipes exported by a module (that is, module B's exported scope gets added
* to module A's compilation scope when module A imports B).
*
* `NgModule`
* `compilation`
* `exported` A B B A
*/
export interface NgModuleTransitiveScopes {
compilation: {directives: Set<any>; pipes: Set<any>;};
@ -30,42 +36,68 @@ export interface NgModuleTransitiveScopes {
/**
* A version of {@link NgModuleDef} that represents the runtime type shape only, and excludes
* metadata parameters.
*
* {@link NgModuleDef}
*/
export type NgModuleDefInternal<T> = NgModuleDef<T, any, any, any>;
/**
* Runtime link information for NgModules.
*
* NgModule
*
* This is the internal data structure used by the runtime to assemble components, directives,
* pipes, and injectors.
*
*
*
* NOTE: Always use `defineNgModule` function to create this object,
* never create the object directly since the shape of this object
* can change between versions.
*
* 使 `defineNgModule`
*/
export interface NgModuleDef<T, Declarations, Imports, Exports> {
/** Token representing the module. Used by DI. */
/** Token representing the module. Used by DI.
*
* DI 使
*/
type: T;
/** List of components to bootstrap. */
/** List of components to bootstrap.
*
*
*/
bootstrap: Type<any>[];
/** List of components, directives, and pipes declared by this module. */
/** List of components, directives, and pipes declared by this module.
*
*
*/
declarations: Type<any>[];
/** List of modules or `ModuleWithProviders` imported by this module. */
/** List of modules or `ModuleWithProviders` imported by this module.
*
* `ModuleWithProviders`
*/
imports: Type<any>[];
/**
* List of modules, `ModuleWithProviders`, components, directives, or pipes exported by this
* module.
*
* `ModuleWithProviders`
*/
exports: Type<any>[];
/**
* Cached value of computed `transitiveCompileScopes` for this module.
*
* `transitiveCompileScopes`
*
* This should never be read directly, but accessed via `transitiveScopesFor`.
*
* 使 `transitiveScopesFor` 访
*/
transitiveCompileScopes: NgModuleTransitiveScopes|null;
}
@ -73,8 +105,12 @@ export interface NgModuleDef<T, Declarations, Imports, Exports> {
/**
* A wrapper around an NgModule that associates it with the providers.
*
* NgModule providers
*
* @param T the module type. In Ivy applications, this must be explicitly
* provided.
*
* Ivy
*/
export interface ModuleWithProviders<T = any> {
ngModule: Type<T>;
@ -84,20 +120,34 @@ export interface ModuleWithProviders<T = any> {
/**
* A schema definition associated with an NgModule.
*
* NgModule schemaHTML架构
*
* @see `@NgModule`, `CUSTOM_ELEMENTS_SCHEMA`, `NO_ERRORS_SCHEMA`
*
* @param name The name of a defined schema.
*
* schema
*
* @experimental
*/
export interface SchemaMetadata { name: string; }
/**
* Defines a schema that allows an NgModule to contain the following:
*
* schema NgModule
*
* - Non-Angular elements named with dash case (`-`).
*
* 线`-` Angular
*
* - Element properties named with dash case (`-`).
*
* 线`-`
*
* Dash case is the naming convention for custom elements.
*
* 线
*
*/
export const CUSTOM_ELEMENTS_SCHEMA: SchemaMetadata = {
@ -107,6 +157,8 @@ export const CUSTOM_ELEMENTS_SCHEMA: SchemaMetadata = {
/**
* Defines a schema that allows any property on any element.
*
* schema
*
* @experimental
*/
export const NO_ERRORS_SCHEMA: SchemaMetadata = {
@ -118,10 +170,13 @@ export const NO_ERRORS_SCHEMA: SchemaMetadata = {
* Type of the NgModule decorator / constructor function.
*
*
* NgModule
*/
export interface NgModuleDecorator {
/**
* Marks a class as an NgModule and supplies configuration metadata.
*
* NgModule
*/
(obj?: NgModule): TypeDecorator;
new (obj?: NgModule): NgModule;
@ -130,6 +185,7 @@ export interface NgModuleDecorator {
/**
* Type of the NgModule metadata.
*
* NgModule
*
*/
export interface NgModule {
@ -137,6 +193,8 @@ export interface NgModule {
* The set of injectable objects that are available in the injector
* of this module.
*
*
*
* @see [Dependency Injection guide](guide/dependency-injection)
* @see [NgModule guide](guide/providers)
*
@ -147,6 +205,9 @@ export interface NgModule {
* The NgModule used for bootstrapping uses the root injector, and can provide dependencies
* to any part of the app.
*
*
* NgModule 使
*
* A lazy-loaded module has its own injector, typically a child of the app root injector.
* Lazy-loaded services are scoped to the lazy-loaded module's injector.
* If a lazy-loaded module also provides the `UserService`, any component created
@ -154,11 +215,21 @@ export interface NgModule {
* of the service, not the instance in the root injector.
* Components in external modules continue to receive the instance provided by their injectors.
*
*
*
* `UserService`
*
* 使
*
* ### Example
*
* ###
*
* The following example defines a class that is injected in
* the HelloWorld NgModule:
*
* HelloWorld NgModule
*
* ```
* class Greeter {
* greet(name:string) {
@ -186,20 +257,32 @@ export interface NgModule {
* The set of components, directives, and pipes ([declarables](guide/glossary#declarable))
* that belong to this module.
*
* [](guide/glossary#declarable)
*
* @usageNotes
*
* The set of selectors that are available to a template include those declared here, and
* those that are exported from imported NgModules.
*
* selector NgModule
*
* Declarables must belong to exactly one module.
* The compiler emits an error if you try to declare the same class in more than one module.
* Be careful not to declare a class that is imported from another module.
*
*
*
*
*
* ### Example
*
* ###
*
* The following example allows the CommonModule to use the `NgFor`
* directive.
*
* CommonModule 使 `NgFor`
*
* ```javascript
* @NgModule({
* declarations: [NgFor]
@ -214,6 +297,8 @@ export interface NgModule {
* The set of NgModules whose exported [declarables](guide/glossary#declarable)
* are available to templates in this module.
*
* NgModule [](guide/glossary#declarable)
*
* @usageNotes
*
* A template can use exported declarables from any
@ -223,11 +308,18 @@ export interface NgModule {
* it, which makes the declarables from `ModuleB` available
* wherever `ModuleA` is imported.
*
* 使
* `ModuleA` `ModuleB` `ModuleB` `ModuleA`
*
* ### Example
*
* ###
*
* The following example allows MainModule to use anthing exported by
* `CommonModule`:
*
* `MainModule` 使 `CommonModule`
*
* ```javascript
* @NgModule({
* imports: [CommonModule]
@ -244,23 +336,37 @@ export interface NgModule {
* NgModule that can be used in the template of any component that is part of an
* NgModule that imports this NgModule. Exported declarations are the module's public API.
*
* NgModule 使
* API
*
* A declarable belongs to one and only one NgModule.
* A module can list another module among its exports, in which case all of that module's
* public declaration are exported.
*
* NgModule
* `exports`
*
* @usageNotes
*
* Declarations are private by default.
* If this ModuleA does not export UserComponent, then only the components within this
* ModuleA can use UserComponent.
*
*
*
* ModuleA can import ModuleB and also export it, making exports from ModuleB
* available to an NgModule that imports ModuleA.
*
* ModuleA ModuleB ModuleB ModuleA
*
* ### Example
*
* ###
*
* The following example exports the `NgFor` directive from CommonModule.
*
* `CommonModule` `NgFor`
*
* ```javascript
* @NgModule({
* exports: [NgFor]
@ -275,14 +381,21 @@ export interface NgModule {
* The set of components to compile when this NgModule is defined,
* so that they can be dynamically loaded into the view.
*
* NgModule
*
* For each component listed here, Angular creates a `ComponentFactory`
* and stores it in the `ComponentFactoryResolver`.
*
* Angular `ComponentFactory` `ComponentFactoryResolver`
*
* Angular automatically adds components in the module's bootstrap
* and route definitions into the `entryComponents` list. Use this
* option to add components that are bootstrapped
* using one of the imperative techniques, such as `ViewContainerRef.createComponent()`.
*
* Angular `bootstrap` `entryComponents`
* `ViewContainerRef.createComponent()`
*
* @see [Entry Components](guide/entry-components)
*/
entryComponents?: Array<Type<any>|any[]>;
@ -291,6 +404,8 @@ export interface NgModule {
* The set of components that are bootstrapped when
* this module is bootstrapped. The components listed here
* are automatically added to `entryComponents`.
*
* `entryComponents`
*/
bootstrap?: Array<Type<any>|any[]>;
@ -299,10 +414,17 @@ export interface NgModule {
* Elements and properties that are neither Angular components nor directives
* must be declared in a schema.
*
* NgModule 使 schemaHTML
* Angular schema
*
* Allowed value are `NO_ERRORS_SCHEMA` and `CUSTOM_ELEMENTS_SCHEMA`.
*
* `NO_ERRORS_SCHEMA` `CUSTOM_ELEMENTS_SCHEMA`
*
* @security When using one of `NO_ERRORS_SCHEMA` or `CUSTOM_ELEMENTS_SCHEMA`
* you must ensure that allowed elements and properties securely escape inputs.
*
* 使 `NO_ERRORS_SCHEMA` `CUSTOM_ELEMENTS_SCHEMA`
*/
schemas?: Array<SchemaMetadata|any[]>;
@ -310,6 +432,9 @@ export interface NgModule {
* A name or path that uniquely identifies this NgModule in `getModuleFactory`.
* If left `undefined`, the NgModule is not registered with
* `getModuleFactory`.
*
* NgModule `getModuleFactory`
* `undefined` `getModuleFactory`
*/
id?: string;
@ -317,7 +442,11 @@ export interface NgModule {
* If true, this module will be skipped by the AOT compiler and so will always be compiled
* using JIT.
*
* `true` AOT JIT
*
* This exists to support future Ivy work and has no effect currently.
*
* Ivy
*/
jit?: true;
}
@ -344,11 +473,22 @@ export const NgModule: NgModuleDecorator = makeDecorator(
* Decorator that marks the following class as an NgModule, and supplies
* configuration metadata for it.
*
* NgModule
*
* * The `declarations` and `entryComponents` options configure the compiler
* with information about what belongs to the NgModule.
*
* `declarations` `entryComponents` 西 NgModule
*
* * The `providers` options configures the NgModule's injector to provide
* dependencies the NgModule members.
*
* `providers` NgModule 便 NgModule
*
* * The `imports` and `exports` options bring in members from other modules, and make
* this module's members available to others.
*
* `imports` `exports`
*
*/
(type: Type<any>, meta: NgModule) => (R3_COMPILE_NGMODULE || preR3NgModuleCompile)(type, meta));