fix: 错译:不仅改为仅仅
This commit is contained in:
parent
66e640a948
commit
398d887f11
@ -423,7 +423,7 @@ a#tree-shaking
|
|||||||
which in turn makes more of the application "tree shakable".
|
which in turn makes more of the application "tree shakable".
|
||||||
|
|
||||||
摇树优化和AOT编译是单独的步骤。
|
摇树优化和AOT编译是单独的步骤。
|
||||||
摇树优化不仅针对JavaScript代码。
|
摇树优化仅仅针对JavaScript代码。
|
||||||
AOT编译会把应用中的大部分都转换成JavaScript,这种转换会让应用更容易被“摇树优化”。
|
AOT编译会把应用中的大部分都转换成JavaScript,这种转换会让应用更容易被“摇树优化”。
|
||||||
|
|
||||||
a#rollup
|
a#rollup
|
||||||
|
@ -2,124 +2,208 @@ include ../_util-fns
|
|||||||
|
|
||||||
:marked
|
:marked
|
||||||
Component templates are not always fixed. An application may need to load new components at runtime.
|
Component templates are not always fixed. An application may need to load new components at runtime.
|
||||||
|
|
||||||
|
组件的模板不会永远是固定的。应用可能会需要在运行期间加载一些新的组件。
|
||||||
|
|
||||||
This cookbook shows you how to use `ComponentFactoryResolver` to add components dynamically.
|
This cookbook shows you how to use `ComponentFactoryResolver` to add components dynamically.
|
||||||
|
|
||||||
|
这本烹饪书为你展示如何使用`ComponentFactoryResolver`来动态添加组件。
|
||||||
|
|
||||||
<a id="toc"></a>
|
<a id="toc"></a>
|
||||||
:marked
|
:marked
|
||||||
# Contents
|
# Contents
|
||||||
|
|
||||||
|
# 目录
|
||||||
|
|
||||||
* [Dynamic component loading](#dynamic-loading)
|
* [Dynamic component loading](#dynamic-loading)
|
||||||
* [The directive](#directive)
|
|
||||||
* [Loading components](#loading-components)
|
|
||||||
|
|
||||||
* [Resolving Components](#resolving-components)
|
[动态组件加载](#dynamic-loading)
|
||||||
* [Selector References](#selector-references)
|
|
||||||
|
* [The directive](#directive)
|
||||||
|
|
||||||
|
[指令](#directive)
|
||||||
|
|
||||||
|
* [Loading components](#loading-components)
|
||||||
|
|
||||||
|
[加载组件](#loading-components)
|
||||||
|
|
||||||
|
* [Resolving Components](#resolving-components)
|
||||||
|
|
||||||
|
[解析组件](#resolving-components)
|
||||||
|
|
||||||
|
* [Selector References](#selector-references)
|
||||||
|
|
||||||
|
[通过选择器引用](#selector-references)
|
||||||
|
|
||||||
|
* [A common _AdComponent_ interface](#common-interface)
|
||||||
|
|
||||||
|
[通用的`AdComponent`接口](#common-interface)
|
||||||
|
|
||||||
|
* [Final ad banner](#final-ad-banner)
|
||||||
|
|
||||||
|
[最终的广告Banner](#final-ad-banner)
|
||||||
|
|
||||||
* [A common _AdComponent_ interface](#common-interface)
|
|
||||||
* [Final ad banner](#final-ad-banner)
|
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
See the <live-example name="cb-dynamic-component-loader"></live-example>
|
See the <live-example name="cb-dynamic-component-loader"></live-example>
|
||||||
of the code in this cookbook.
|
of the code in this cookbook.
|
||||||
|
|
||||||
|
到<live-example name="cb-dynamic-component-loader"></live-example>查看本烹饪书的源码。
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
<a id="dynamic-loading"></a>
|
<a id="dynamic-loading"></a>
|
||||||
:marked
|
:marked
|
||||||
## Dynamic component loading
|
## Dynamic component loading
|
||||||
|
|
||||||
|
## 动态组件加载
|
||||||
|
|
||||||
The following example shows how to build a dynamic ad banner.
|
The following example shows how to build a dynamic ad banner.
|
||||||
|
|
||||||
|
下面的例子展示了如何构建动态广告条。
|
||||||
|
|
||||||
The hero agency is planning an ad campaign with several different
|
The hero agency is planning an ad campaign with several different
|
||||||
ads cycling through the banner. New ad components are added
|
ads cycling through the banner. New ad components are added
|
||||||
frequently by several different teams. This makes it impractical
|
frequently by several different teams. This makes it impractical
|
||||||
to use a template with a static component structure.
|
to use a template with a static component structure.
|
||||||
|
|
||||||
|
英雄管理局正在计划一个广告活动,要在广告条中显示一系列不同的广告。几个不同的小组可能会频繁加入新的广告组件。
|
||||||
|
再用只支持静态组件结构的模板显然是不现实的。
|
||||||
|
|
||||||
Instead, you need a way to load a new component without a fixed
|
Instead, you need a way to load a new component without a fixed
|
||||||
reference to the component in the ad banner's template.
|
reference to the component in the ad banner's template.
|
||||||
|
|
||||||
|
我们需要一种新的组件加载方式,它不需要在广告条组件的模板中引用固定的组件。
|
||||||
|
|
||||||
Angular comes with its own API for loading components dynamically.
|
Angular comes with its own API for loading components dynamically.
|
||||||
|
|
||||||
|
Angular 自带的API就能支持动态加载组件。
|
||||||
|
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
<a id="directive"></a>
|
<a id="directive"></a>
|
||||||
:marked
|
:marked
|
||||||
## The directive
|
## The directive
|
||||||
|
|
||||||
|
## 指令
|
||||||
|
|
||||||
Before you can add components you have to define an anchor point
|
Before you can add components you have to define an anchor point
|
||||||
to tell Angular where to insert components.
|
to tell Angular where to insert components.
|
||||||
|
|
||||||
|
在添加组件之前,先要定义一个锚点来告诉Angular要把组件插入到什么地方。
|
||||||
|
|
||||||
The ad banner uses a helper directive called `AdDirective` to
|
The ad banner uses a helper directive called `AdDirective` to
|
||||||
mark valid insertion points in the template.
|
mark valid insertion points in the template.
|
||||||
|
|
||||||
|
广告条使用一个名叫`AdDirective`的辅助指令来在模板中标记出有效的插入点。
|
||||||
|
|
||||||
+makeExample('cb-dynamic-component-loader/ts/src/app/ad.directive.ts',null,'src/app/ad.directive.ts')(format='.')
|
+makeExample('cb-dynamic-component-loader/ts/src/app/ad.directive.ts',null,'src/app/ad.directive.ts')(format='.')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
`AdDirective` injects `ViewContainerRef` to gain access to the view
|
`AdDirective` injects `ViewContainerRef` to gain access to the view
|
||||||
container of the element that will host the dynamically added component.
|
container of the element that will host the dynamically added component.
|
||||||
|
|
||||||
|
`AdDirective`注入了`ViewContainerRef`来获取对容器视图的访问权,这个容器就是那些动态加入的组件的宿主。
|
||||||
|
|
||||||
In the `@Directive` decorator, notice the selector name, `ad-host`;
|
In the `@Directive` decorator, notice the selector name, `ad-host`;
|
||||||
that's what you use to apply the directive to the element.
|
that's what you use to apply the directive to the element.
|
||||||
The next section shows you how.
|
The next section shows you how.
|
||||||
|
|
||||||
|
在`@Directive`装饰器中,要注意选择器的名称:`ad-host`,它就是我们将应用到元素上的指令。下一节我们会展示如何做。
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
<a id="loading-components"></a>
|
<a id="loading-components"></a>
|
||||||
:marked
|
:marked
|
||||||
## Loading components
|
## Loading components
|
||||||
|
|
||||||
|
## 加载组件
|
||||||
|
|
||||||
Most of the ad banner implementation is in `ad-banner.component.ts`.
|
Most of the ad banner implementation is in `ad-banner.component.ts`.
|
||||||
To keep things simple in this example, the HTML is in the `@Component`
|
To keep things simple in this example, the HTML is in the `@Component`
|
||||||
decorator's `template` property as a template string.
|
decorator's `template` property as a template string.
|
||||||
|
|
||||||
|
广告条的大部分实现代码都在`ad-banner.component.ts`中。
|
||||||
|
为了让这个例子简单点,我们把HTML直接放在了`@Component`装饰器的`template`属性中。
|
||||||
|
|
||||||
The `<ng-template>` element is where you apply the directive you just made.
|
The `<ng-template>` element is where you apply the directive you just made.
|
||||||
To apply the `AdDirective`, recall the selector from `ad.directive.ts`,
|
To apply the `AdDirective`, recall the selector from `ad.directive.ts`,
|
||||||
`ad-host`. Apply that to `<ng-template>` without the square brackets. Now Angular knows
|
`ad-host`. Apply that to `<ng-template>` without the square brackets. Now Angular knows
|
||||||
where to dynamically load components.
|
where to dynamically load components.
|
||||||
|
|
||||||
|
`<ng-template>`元素就是刚才制作的指令将应用到的地方。
|
||||||
|
要应用`AdDirective`,回忆一下来自`ad.directive.ts`的选择器`ad-host`。把它应用到`<ng-template>`(不用带方括号)。
|
||||||
|
这下,Angular就知道该把组件动态加载到哪里了。
|
||||||
|
|
||||||
+makeExample('cb-dynamic-component-loader/ts/src/app/ad-banner.component.ts', 'ad-host' ,'src/app/ad-banner.component.ts (template)')(format='.')
|
+makeExample('cb-dynamic-component-loader/ts/src/app/ad-banner.component.ts', 'ad-host' ,'src/app/ad-banner.component.ts (template)')(format='.')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
The `<ng-template>` element is a good choice for dynamic components
|
The `<ng-template>` element is a good choice for dynamic components
|
||||||
because it doesn't render any additional output.
|
because it doesn't render any additional output.
|
||||||
|
|
||||||
|
`<ng-template>`元素是动态加载组件的最佳选择,因为它不会渲染任何额外的输出。
|
||||||
|
|
||||||
a#resolving-components
|
a#resolving-components
|
||||||
:marked
|
:marked
|
||||||
### Resolving components
|
### Resolving components
|
||||||
|
|
||||||
|
### 解析组件
|
||||||
|
|
||||||
Take a closer look at the methods in `ad-banner.component.ts`.
|
Take a closer look at the methods in `ad-banner.component.ts`.
|
||||||
|
|
||||||
|
深入看看`ad-banner.component.ts`中的方法。
|
||||||
|
|
||||||
`AdBannerComponent` takes an array of `AdItem` objects as input,
|
`AdBannerComponent` takes an array of `AdItem` objects as input,
|
||||||
which ultimately comes from `AdService`. `AdItem` objects specify
|
which ultimately comes from `AdService`. `AdItem` objects specify
|
||||||
the type of component to load and any data to bind to the
|
the type of component to load and any data to bind to the
|
||||||
component.`AdService` returns the actual ads making up the ad campaign.
|
component.`AdService` returns the actual ads making up the ad campaign.
|
||||||
|
|
||||||
|
`AdBannerComponent`接收一个`AdItem`对象的数组作为输入,它最终来自`AdService`。
|
||||||
|
`AdItem`对象指定要加载的组件类,以及绑定到该组件上的任意数据。
|
||||||
|
`AdService`可以返回广告活动中的那些广告。
|
||||||
|
|
||||||
Passing an array of components to `AdBannerComponent` allows for a
|
Passing an array of components to `AdBannerComponent` allows for a
|
||||||
dynamic list of ads without static elements in the template.
|
dynamic list of ads without static elements in the template.
|
||||||
|
|
||||||
|
给`AdBannerComponent`传入一个组件数组可以让我们在模板中放入一个广告的动态列表,而不用写死在模板中。
|
||||||
|
|
||||||
With its `getAds()` method, `AdBannerComponent` cycles through the array of `AdItems`
|
With its `getAds()` method, `AdBannerComponent` cycles through the array of `AdItems`
|
||||||
and loads a new component every 3 seconds by calling `loadComponent()`.
|
and loads a new component every 3 seconds by calling `loadComponent()`.
|
||||||
|
|
||||||
|
通过`getAds()`方法,`AdBannerComponent`可以循环遍历`AdItems`的数组,并且每三秒调用一次`loadComponent()`来加载新组件。
|
||||||
|
|
||||||
+makeExample('cb-dynamic-component-loader/ts/src/app/ad-banner.component.ts', 'class' ,'src/app/ad-banner.component.ts (excerpt)')(format='.')
|
+makeExample('cb-dynamic-component-loader/ts/src/app/ad-banner.component.ts', 'class' ,'src/app/ad-banner.component.ts (excerpt)')(format='.')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
The `loadComponent()` method is doing a lot of the heavy lifting here.
|
The `loadComponent()` method is doing a lot of the heavy lifting here.
|
||||||
Take it step by step. First, it picks an ad.
|
Take it step by step. First, it picks an ad.
|
||||||
|
|
||||||
|
这里的`loadComponent()`方法很重要。
|
||||||
|
我们来一步步看看。首先,它选取了一个广告。
|
||||||
|
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
**How _loadComponent()_ chooses an ad**
|
**How _loadComponent()_ chooses an ad**
|
||||||
|
|
||||||
|
**`loadComponent()`如何选择广告**
|
||||||
|
|
||||||
The `loadComponent()` method chooses an ad using some math.
|
The `loadComponent()` method chooses an ad using some math.
|
||||||
|
|
||||||
First, it sets the `currentAddIndex` by taking whatever it
|
`loadComponent()`方法使用某种算法选择了一个广告。
|
||||||
currently is plus one, dividing that by the length of the `AdItem` array, and
|
|
||||||
using the _remainder_ as the new `currentAddIndex` value. Then, it uses that
|
|
||||||
value to select an `adItem` from the array.
|
|
||||||
|
|
||||||
|
First, it sets the `currentAddIndex` by taking whatever it
|
||||||
|
currently is plus one, dividing that by the length of the `AdItem` array, and
|
||||||
|
using the _remainder_ as the new `currentAddIndex` value. Then, it uses that
|
||||||
|
value to select an `adItem` from the array.
|
||||||
|
|
||||||
|
(译注:循环选取算法)首先,它把`currentAddIndex`递增一,然后用它除以`AdItem`数组长度的*余数*作为新的`currentAddIndex`的值,
|
||||||
|
最后用这个值来从数组中选取一个`adItem`。
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
After `loadComponent()` selects an ad, it uses `ComponentFactoryResolver`
|
After `loadComponent()` selects an ad, it uses `ComponentFactoryResolver`
|
||||||
to resolve a `ComponentFactory` for each specific component.
|
to resolve a `ComponentFactory` for each specific component.
|
||||||
The `ComponentFactory` then creates an instance of each component.
|
The `ComponentFactory` then creates an instance of each component.
|
||||||
|
|
||||||
|
在`loadComponent()`选取了一个广告之后,它使用`ComponentFactoryResolver`来为每个具体的组件解析出一个`ComponentFactory`。
|
||||||
|
然后`ComponentFactory`会为每一个组件创建一个实例。
|
||||||
|
|
||||||
Next, you're targeting the `viewContainerRef` that
|
Next, you're targeting the `viewContainerRef` that
|
||||||
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
|
||||||
@ -157,13 +241,13 @@ a#common-interface
|
|||||||
Here are two sample components and the `AdComponent` interface for reference:
|
Here are two sample components and the `AdComponent` interface for reference:
|
||||||
|
|
||||||
+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
|
||||||
@ -171,7 +255,7 @@ a#final-ad-baner
|
|||||||
### 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>.
|
||||||
|
Loading…
x
Reference in New Issue
Block a user