fix: 翻译完了动态组件加载器

This commit is contained in:
Zhicheng Wang 2017-06-26 17:14:34 +08:00
parent 280e45d1e2
commit 5fb58d8f1e
1 changed files with 40 additions and 6 deletions

View File

@ -29,11 +29,11 @@ include ../_util-fns
* [Resolving Components](#resolving-components) * [Resolving Components](#resolving-components)
[解析组件](#resolving-components) [解析组件](#resolving-components)
* [Selector References](#selector-references) * [Selector References](#selector-references)
[通过选择器引用](#selector-references) [通过选择器引用](#selector-references)
* [A common _AdComponent_ interface](#common-interface) * [A common _AdComponent_ interface](#common-interface)
@ -209,53 +209,87 @@ a#resolving-components
exists on this specific instance of the component. How do you know it's exists on this specific instance of the component. How do you know it's
this specific instance? Because it's referring to `adHost` and `adHost` is the this specific instance? Because it's referring to `adHost` and `adHost` is the
directive you set up earlier to tell Angular where to insert dynamic components. directive you set up earlier to tell Angular where to insert dynamic components.
接下来,我们要把`viewContainerRef`指向这个组件的现有实例。但我们怎么才能找到这个实例呢?
很简单,因为它指向了`adHost`,而这个`adHost`就是我们以前设置过的指令用来告诉Angular该把动态组件插入到什么位置。
As you may recall, `AdDirective` injects `ViewContainerRef` into its constructor. As you may recall, `AdDirective` injects `ViewContainerRef` into its constructor.
This is how the directive accesses the element that you want to use to host the dynamic component. This is how the directive accesses the element that you want to use to host the dynamic component.
回忆一下,`AdDirective`曾在它的构造函数中注入了一个`ViewContainerRef`。
因此这个指令可以访问到这个被我们用作动态组件宿主的元素。
To add the component to the template, you call `createComponent()` on `ViewContainerRef`. To add the component to the template, you call `createComponent()` on `ViewContainerRef`.
要把这个组件添加到模板中,我们可以调用`ViewContainerRef`的`createComponent()`。
The `createComponent()` method returns a reference to the loaded component. The `createComponent()` method returns a reference to the loaded component.
Use that reference to interact with the component by assigning to its properties or calling its methods. Use that reference to interact with the component by assigning to its properties or calling its methods.
`createComponent()`方法返回一个引用,指向这个刚刚加载的组件。
使用这个引用就可以与该组件进行交互,比如设置它的属性或调用它的方法。
a#selector-references a#selector-references
:marked :marked
#### Selector references #### Selector references
#### 对选择器的引用
Generally, the Angular compiler generates a `ComponentFactory` Generally, the Angular compiler generates a `ComponentFactory`
for any component referenced in a template. However, there are for any component referenced in a template. However, there are
no selector references in the templates for no selector references in the templates for
dynamically loaded components since they load at runtime. dynamically loaded components since they load at runtime.
通常Angular编译器会为模板中所引用的每个组件都生成一个`ComponentFactory`类。
但是,对于动态加载的组件,模板中不会出现对它们的选择器的引用。
To ensure that the compiler still generates a factory, To ensure that the compiler still generates a factory,
add dynamically loaded components to the `NgModule`'s `entryComponents` array: add dynamically loaded components to the `NgModule`'s `entryComponents` array:
要想确保编译器照常生成工厂类,就要把这些动态加载的组件添加到`NgModule`的`entryComponents`数组中:
+makeExample('cb-dynamic-component-loader/ts/src/app/app.module.ts', 'entry-components' ,'src/app/app.module.ts (entry components)')(format='.') +makeExample('cb-dynamic-component-loader/ts/src/app/app.module.ts', 'entry-components' ,'src/app/app.module.ts (entry components)')(format='.')
a#common-interface a#common-interface
:marked :marked
### A common _AdComponent_ interface ### A common _AdComponent_ interface
### 公共的`AdComponent`接口
In the ad banner, all components implement a common `AdComponent` interface to In the ad banner, all components implement a common `AdComponent` interface to
standardize the API for passing data to the components. standardize the API for passing data to the components.
在广告条中,所有组件都实现了一个公共接口`AdComponent`它定义了一个标准化的API让我们把数据传给组件。
Here are two sample components and the `AdComponent` interface for reference: Here are two sample components and the `AdComponent` interface for reference:
下面就是两个范例组件及其`AdComponent`接口:
+makeTabs( +makeTabs(
`cb-dynamic-component-loader/ts/src/app/hero-job-ad.component.ts, `cb-dynamic-component-loader/ts/src/app/hero-job-ad.component.ts,
cb - dynamic - component - loader / ts / src / app / hero - profile.component.ts, cb-dynamic-component-loader/ts/src/app/hero-profile.component.ts,
cb - dynamic - component - loader / ts / src / app / ad.component.ts`, cb-dynamic-component-loader/ts/src/app/ad.component.ts`,
null, null,
`hero-job-ad.component.ts, `hero-job-ad.component.ts,
hero - profile.component.ts, hero-profile.component.ts,
ad.component.ts` ad.component.ts`
) )
a#final-ad-baner a#final-ad-baner
:marked :marked
### Final ad banner ### Final ad banner
The final ad banner looks like this:
### 最终的广告栏
The final ad banner looks like this:
最终的广告栏是这样的:
figure.image-display figure.image-display
img(src="/resources/images/cookbooks/dynamic-component-loader/ads.gif" alt="Ads") img(src="/resources/images/cookbooks/dynamic-component-loader/ads.gif" alt="Ads")
:marked :marked
See the <live-example name="cb-dynamic-component-loader"></live-example>. See the <live-example name="cb-dynamic-component-loader"></live-example>.
参见<live-example name="cb-dynamic-component-loader"></live-example>。