From 398d887f11004bab5ffd054f290ac772fb73d92f Mon Sep 17 00:00:00 2001 From: Zhicheng Wang Date: Tue, 13 Jun 2017 17:08:41 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E9=94=99=E8=AF=91=EF=BC=9A=E4=B8=8D?= =?UTF-8?q?=E4=BB=85=E6=94=B9=E4=B8=BA=E4=BB=85=E4=BB=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../docs/ts/latest/cookbook/aot-compiler.jade | 2 +- .../cookbook/dynamic-component-loader.jade | 182 +++++++++++++----- 2 files changed, 134 insertions(+), 50 deletions(-) diff --git a/public/docs/ts/latest/cookbook/aot-compiler.jade b/public/docs/ts/latest/cookbook/aot-compiler.jade index 5753d11ce7..1b03333730 100644 --- a/public/docs/ts/latest/cookbook/aot-compiler.jade +++ b/public/docs/ts/latest/cookbook/aot-compiler.jade @@ -423,7 +423,7 @@ a#tree-shaking which in turn makes more of the application "tree shakable". 摇树优化和AOT编译是单独的步骤。 - 摇树优化不仅针对JavaScript代码。 + 摇树优化仅仅针对JavaScript代码。 AOT编译会把应用中的大部分都转换成JavaScript，这种转换会让应用更容易被“摇树优化”。 a#rollup diff --git a/public/docs/ts/latest/cookbook/dynamic-component-loader.jade b/public/docs/ts/latest/cookbook/dynamic-component-loader.jade index 583e8e1e26..fa6ad304bf 100644 --- a/public/docs/ts/latest/cookbook/dynamic-component-loader.jade +++ b/public/docs/ts/latest/cookbook/dynamic-component-loader.jade @@ -2,124 +2,208 @@ include ../_util-fns :marked 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. + + 这本烹饪书为你展示如何使用`ComponentFactoryResolver`来动态添加组件。 :marked - # Contents + # Contents + + # 目录 - * [Dynamic component loading](#dynamic-loading) - * [The directive](#directive) - * [Loading components](#loading-components) + * [Dynamic component loading](#dynamic-loading) - * [Resolving Components](#resolving-components) - * [Selector References](#selector-references) + [动态组件加载](#dynamic-loading) + + * [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 - See the - of the code in this cookbook. + See the + of the code in this cookbook. + + 到查看本烹饪书的源码。 .l-main-section :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 - ads cycling through the banner. New ad components are added - frequently by several different teams. This makes it impractical - to use a template with a static component structure. + The hero agency is planning an ad campaign with several different + ads cycling through the banner. New ad components are added + frequently by several different teams. This makes it impractical + to use a template with a static component structure. + + 英雄管理局正在计划一个广告活动，要在广告条中显示一系列不同的广告。几个不同的小组可能会频繁加入新的广告组件。 + 再用只支持静态组件结构的模板显然是不现实的。 - Instead, you need a way to load a new component without a fixed - reference to the component in the ad banner's template. + Instead, you need a way to load a new component without a fixed + 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 :marked - ## The directive + ## The directive + + ## 指令 - Before you can add components you have to define an anchor point - to tell Angular where to insert components. + Before you can add components you have to define an anchor point + to tell Angular where to insert components. + + 在添加组件之前，先要定义一个锚点来告诉Angular要把组件插入到什么地方。 - The ad banner uses a helper directive called `AdDirective` to - mark valid insertion points in the template. + The ad banner uses a helper directive called `AdDirective` to + 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='.') :marked `AdDirective` injects `ViewContainerRef` to gain access to the view container of the element that will host the dynamically added component. + + `AdDirective`注入了`ViewContainerRef`来获取对容器视图的访问权，这个容器就是那些动态加入的组件的宿主。 In the `@Directive` decorator, notice the selector name, `ad-host`; that's what you use to apply the directive to the element. The next section shows you how. + + 在`@Directive`装饰器中，要注意选择器的名称：`ad-host`，它就是我们将应用到元素上的指令。下一节我们会展示如何做。 .l-main-section :marked - ## Loading components + ## Loading components + + ## 加载组件 - 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` - decorator's `template` property as a template string. + 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` + decorator's `template` property as a template string. + + 广告条的大部分实现代码都在`ad-banner.component.ts`中。 + 为了让这个例子简单点，我们把HTML直接放在了`@Component`装饰器的`template`属性中。 - The `` element is where you apply the directive you just made. - To apply the `AdDirective`, recall the selector from `ad.directive.ts`, - `ad-host`. Apply that to `` without the square brackets. Now Angular knows - where to dynamically load components. + The `` element is where you apply the directive you just made. + To apply the `AdDirective`, recall the selector from `ad.directive.ts`, + `ad-host`. Apply that to `` without the square brackets. Now Angular knows + where to dynamically load components. + + ``元素就是刚才制作的指令将应用到的地方。 + 要应用`AdDirective`，回忆一下来自`ad.directive.ts`的选择器`ad-host`。把它应用到``（不用带方括号）。 + 这下，Angular就知道该把组件动态加载到哪里了。 +makeExample('cb-dynamic-component-loader/ts/src/app/ad-banner.component.ts', 'ad-host' ,'src/app/ad-banner.component.ts (template)')(format='.') :marked The `` element is a good choice for dynamic components because it doesn't render any additional output. + + ``元素是动态加载组件的最佳选择，因为它不会渲染任何额外的输出。 a#resolving-components :marked ### Resolving components + + ### 解析组件 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, which ultimately comes from `AdService`. `AdItem` objects specify the type of component to load and any data to bind to the 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 dynamic list of ads without static elements in the template. + + 给`AdBannerComponent`传入一个组件数组可以让我们在模板中放入一个广告的动态列表，而不用写死在模板中。 With its `getAds()` method, `AdBannerComponent` cycles through the array of `AdItems` 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='.') :marked The `loadComponent()` method is doing a lot of the heavy lifting here. Take it step by step. First, it picks an ad. + + 这里的`loadComponent()`方法很重要。 + 我们来一步步看看。首先，它选取了一个广告。 .l-sub-section - :marked - **How _loadComponent()_ chooses an ad** + :marked + **How _loadComponent()_ chooses an ad** + + **`loadComponent()`如何选择广告** - The `loadComponent()` method chooses an ad using some math. - - 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. + The `loadComponent()` method chooses an ad using some math. + + `loadComponent()`方法使用某种算法选择了一个广告。 + 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 After `loadComponent()` selects an ad, it uses `ComponentFactoryResolver` to resolve a `ComponentFactory` for each specific component. The `ComponentFactory` then creates an instance of each component. + + 在`loadComponent()`选取了一个广告之后，它使用`ComponentFactoryResolver`来为每个具体的组件解析出一个`ComponentFactory`。 + 然后`ComponentFactory`会为每一个组件创建一个实例。 Next, you're targeting the `viewContainerRef` that 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: +makeTabs( - `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/ad.component.ts`, - null, - `hero-job-ad.component.ts, - hero-profile.component.ts, - 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 / ad.component.ts`, +null, +`hero-job-ad.component.ts, +hero - profile.component.ts, +ad.component.ts` ) a#final-ad-baner @@ -171,7 +255,7 @@ a#final-ad-baner ### Final ad banner The final ad banner looks like this: 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 - See the . + See the .