基础知识-架构 翻译了一部分。修改了对照翻译模块的小功能。
This commit is contained in:
Zhicheng Wang
parent
208b79f742
commit
67c9ef0c7a
|
|
@ -3,30 +3,29 @@ include ../_util-fns
|
|||
:marked
|
||||
Angular 2 is a framework to help us build client applications in HTML and JavaScript.
|
||||
|
||||
Angular 2是一个使用HTML和JavaScript构建客户端应用的框架。
|
||||
Angular 2是一个用HTML和JavaScript构建客户端应用的框架。
|
||||
|
||||
The framework consists of several cooperating libraries, some of them core and some optional.
|
||||
|
||||
这个框架包括一系列紧密合作的库，有些是核心库，有些是可选库。
|
||||
该框架包括一系列紧密合作的库，有些是核心库，有些是可选库。
|
||||
|
||||
We write applications by composing HTML *templates* with Angularized-markup,
|
||||
writing *component* classes to manage those templates, adding application logic in *services*,
|
||||
and handing the top root component to Angular's *bootstrapper*.
|
||||
|
||||
我们用带有Angular标记的HTML写 *模板* ，用 *组件* 类来管理这些模板，用 *服务* 添加应用逻辑，用根组件来完成Angular *启动* 。
|
||||
把这些组合起来，我们就得到了一个应用程序。
|
||||
我们这样写应用程序：用带Angular扩展语法的HTML写*模板*，用*组件*类管理这些模板，用*服务*添加应用逻辑，用根组件完成Angular*启动*。
|
||||
|
||||
Angular takes over, presenting our application content in a browser and responding to user interactions
|
||||
according to the instructions we provided.
|
||||
|
||||
Angular在浏览器中接管、展现我们的应用内容，并且根据我们提供的指令响应用户的交互。
|
||||
Angular在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户的交互。
|
||||
|
||||
<!-- figure img(src="/resources/images/devguide/architecture/airplane.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:10px" ) -->
|
||||
:marked
|
||||
Of course there is more to it than this. We'll learn the details when we dive into the guide chapters.
|
||||
Let's get the big picture first.
|
||||
|
||||
当然，这只是冰山一角。随着内容的深入，我们还会学到更多的细节。
|
||||
当然，这只是冰山的一角。随着内容的深入，我们还会学到更多的细节。
|
||||
我们先来看看宏观图景。
|
||||
|
||||
figure
|
||||
|
|
@ -60,7 +59,7 @@ figure
|
|||
:marked
|
||||
The code referenced in this chapter is available as a [live example](/resources/live-examples/architecture/ts/plnkr.html).
|
||||
|
||||
本章所引用的代码可以在这个[在线例子](/resources/live-examples/architecture/ts/plnkr.html)中找到。
|
||||
本章所引用的代码可以从这个[在线例子](/resources/live-examples/architecture/ts/plnkr.html)中找到。
|
||||
<a id="module"></a>
|
||||
.l-main-section
|
||||
:marked
|
||||
|
|
@ -75,54 +74,55 @@ figure
|
|||
|
||||
In general we assemble our application from many **modules**.
|
||||
|
||||
我们的程序通常都是由很多 *模块* 组装成的。
|
||||
我们的程序通常都是由很多*模块*组装而成的。
|
||||
|
||||
A typical module is a cohesive block of code dedicated to a single purpose.
|
||||
A module **exports** something of value in that code, typically one thing such as a class.
|
||||
|
||||
典型的组件是一个内聚的代码块组成的，用以完成单一的目的。
|
||||
典型的组件是一个内聚的代码块，用以完成单一的目的。
|
||||
在这些代码中，模块会*导出*一些东西，最典型的就是类。
|
||||
<br clear="all"><br>
|
||||
.l-sub-section
|
||||
:marked
|
||||
### Modules are optional
|
||||
### 组件是可选的
|
||||
### 模块是可选的
|
||||
We highly recommend modular design. TypeScript has great support for ES2015 module syntax and our chapters assume we're taking a modular
|
||||
approach using that syntax. That's why we list *Module* among the basic building blocks.
|
||||
|
||||
我们强烈推荐遵循模块化设计。TypeScript对ES2015的模块语法支持很好，本章假定我们使用那些语法作为模块化方案。这就是为什么我们要把 *模块* 列为一种基本构造块。
|
||||
我们强烈推荐使用模块化设计。TypeScript对ES2015的模块语法支持很好，本章就使用这种语法作为模块化方案。这就是为什么我们要把*模块*作为基本构造块之一。
|
||||
|
||||
Angular itself doesn't require a modular approach nor this particular syntax. Don't use it if you don't want it.
|
||||
Each chapter has plenty to offer after you steer clear of the `import` and `export` statements.
|
||||
|
||||
Angular本身并不需要模块化方案或使用这种特定的语法。如果你不喜欢，可以不用它。
|
||||
在你弄清楚了`import`和`export`语句之后，它在每章都会出现很多。
|
||||
不过你得先弄明白`import`和`export`语句，它在每章中都会出现很多次。
|
||||
|
||||
Find setup and organization clues in the JavaScript track (select it from the combo-box at the top of this page)
|
||||
which demonstrates Angular 2 development with plain old JavaScript and no module system.
|
||||
|
||||
在JavaScript（可以从页面顶部的组合框选择它）分支下，可以找到如何安装和进行文件组织的线索。
|
||||
它示范了如何用老版本的JavaScript语言，在没有模块化系统的情况下进行Angular 2开发。
|
||||
在JavaScript（你可以从页面顶部的组合框选择它）分支下，可以找到如何安装和组织文件结构的线索。
|
||||
它示范了如何用老版本的JavaScript语言，在没有模块化系统支持的情况下进行Angular 2开发。
|
||||
:marked
|
||||
Perhaps the first module we meet is a module that exports a *component* class.
|
||||
The component is one of the basic Angular blocks, we write a lot of them,
|
||||
and we'll talk about components in the next segment. For the moment it is enough to know that a
|
||||
component class is the kind of thing we'd export from a module.
|
||||
|
||||
也许我们遇到的第一个模块，就是用于导出 *组件* 类的那个。
|
||||
组件是Angular最基本的构造块之一，我们会写很多。下一段，我们将会讨论组件。
|
||||
但目前，只要知道组件类需要我们从模块中导出就行了。
|
||||
我们遇到的第一个模块，很可能就是用于导出*组件*类的那个。
|
||||
组件是Angular中的基本构造块之一，我们会写很多。下一段儿，我们将会讨论组件。
|
||||
但目前，我们只要知道组件类得从模块中导出就行了。
|
||||
|
||||
Most applications have an `AppComponent`. By convention, we'll find it in a file named `app.component.ts`.
|
||||
Look inside such a file and we'll see an `export` statement like this one.
|
||||
|
||||
大多数应用都有一个`AppComponent`。作为一项惯例，它会位于一个名叫`app.component.ts`的文件中。
|
||||
大多数应用都有一个`AppComponent`。按照惯例，它位于一个名叫`app.component.ts`的文件中。
|
||||
打开它，我们将会看到一个`export`语句，就像这样：
|
||||
+makeExample('architecture/ts/app/app.component.ts', 'export', 'app/app.component.ts (节选)')(format=".")
|
||||
:marked
|
||||
The `export` statement tells TypeScript that this is a module whose
|
||||
`AppComponent` class is public and accessible to other modules of the application.
|
||||
|
||||
`export`语句告诉TypeScript：这是一个模块，`AppComponent`类是公开的，可以被应用中的其它模块访问。
|
||||
`export`语句告诉TypeScript：这是一个模块，其中的`AppComponent`类是公开的，可以被应用中的其它模块访问。
|
||||
|
||||
When we need a reference to the `AppComponent`, we **import** it like this:
|
||||
|
||||
|
|
@ -133,7 +133,7 @@ figure
|
|||
located in a neighboring file.
|
||||
The **module name** (AKA module id) is often the same as the filename without its extension.
|
||||
|
||||
`import`语句告诉系统，它能从附近一个叫作`app.component`的文件中获得一个`AppComponent`组件。
|
||||
`import`语句告诉系统，它能从附近一个名叫`app.component`的文件中获得一个`AppComponent`组件。
|
||||
**模块名**（又叫模块ID）通常和去掉扩展名后的文件名相同。
|
||||
### Library Modules
|
||||
### 库模块
|
||||
|
|
@ -149,23 +149,23 @@ figure
|
|||
Each Angular library contains a [barrel](../glossary.html#barrel) module
|
||||
that is actually a public façade over several logically-related private modules.
|
||||
|
||||
Angular本身就是用一组库模块的形式发布的，它们都以`@angular`为前缀。
|
||||
每个Angular库都包含一个[封装桶](../glossary.html#barrel)模块。
|
||||
它实际上是一个公开的外观层（façade），囊括了许多逻辑上相关的私有模块。
|
||||
Angular本身就是通过npm包发布的一组库模块，它们都以`@angular`为前缀。
|
||||
每个Angular库中都包含一个[封装桶](../glossary.html#barrel)模块。
|
||||
它实际上是一个公开的外观层（façade），囊括了一些逻辑上相关的私有模块。
|
||||
|
||||
The `@angular/core` library is the primary Angular library module from which we get most of what we need.
|
||||
|
||||
`angular2/core`库是主要的Angular库模块，从这里我们能获得所需的大部分东西。
|
||||
`@angular/core`库是主要的Angular库模块，从这里我们能获得所需的大部分东西。
|
||||
<br clear="all">
|
||||
|
||||
There are other important Angular library modules too such as `@angular/common`, `@angular/router`, and `@angular/http`.
|
||||
|
||||
还有另外一些重要的Angular库模块，比如`@angular/common`、`@angular/router` 和 `@angular/http`。
|
||||
还有另一些重要的Angular库模块，比如`@angular/common`、`@angular/router` 和 `@angular/http`。
|
||||
|
||||
We import what we need from an Angular library module in much the same way.
|
||||
For example, we import the Angular **`Component` *function*** from the *@angular/core* module like this:
|
||||
|
||||
我们从Angular库模块中导入所需内容的方式都与此类似。
|
||||
我们从Angular库模块中导入所需内容的方式都跟这差不多。
|
||||
比如，我们从*@angular2/core*中导入Angular **`Component`*函数***的代码是这样的：
|
||||
+makeExample('architecture/ts/app/app.component.ts', 'import')(format=".")
|
||||
:marked
|
||||
|
|
@ -179,15 +179,16 @@ figure
|
|||
the import statement refers to the bare module name, `@angular/core`, *without a path prefix*.
|
||||
|
||||
注意到不同之处了吗？
|
||||
前面的方式中，当从Angular库模块中导入时，import语句引用的是一个裸模块名 —— `angular2/core` —— *没有路径前缀* 。
|
||||
第一种，从Angular库模块中导入时，import语句引用的是“裸”模块名 —— `@angular/core` —— *不带路径前缀*。
|
||||
|
||||
When we import from one of *our* own files, we prefix the module name with the file path.
|
||||
In this example we specify a relative file path (./). That means the
|
||||
source module is in the same folder (./) as the module importing it.
|
||||
We could path up and around the application folder structure if the source module were somewhere else.
|
||||
|
||||
当我们从 *自己的* 文件中导入时，模块名中带有前缀，在这个例子中，是一个相对路径（./）。这表示源模块位于与导入它的模块相同的目录中（./）。
|
||||
如果源模块位于其它位置的话，我们还可以向上引用应用目录结构中的任意路径（../../../somewhere/）。
|
||||
当我们从*自己的*文件中导入时，模块名中带有路径前缀。
|
||||
在这个例子中，是一个相对路径（./）。这表示源模块和想导入它的模块位于同一个目录中（./）。
|
||||
如果源模块位于其它位置，我们还可以向上引用应用目录结构中的任意路径（如`../../../somewhere/`）。
|
||||
.l-sub-section
|
||||
:marked
|
||||
We import and export in the ECMAScript 2015 (ES2015) module syntax.
|
||||
|
|
@ -195,25 +196,25 @@ figure
|
|||
and many other places on the web.
|
||||
|
||||
我们导入和导出使用的是ECMAScript 2015 (ES2015)的语法。
|
||||
要学习更多关于此语法的知识，参见[这里](http://www.2ality.com/2014/09/es6-modules-final.html)，也可以在网上的很多地方找到。
|
||||
要学习关于此语法的更多知识，参见[这里](http://www.2ality.com/2014/09/es6-modules-final.html)，在网上很多别的地方也能找到相关资料。
|
||||
|
||||
The infrastructure *behind* module loading and importing is an important subject.
|
||||
But it's a subject outside the scope of this introduction to Angular.
|
||||
While we're focused on our application, *import* and *export*
|
||||
is about all we need to know.
|
||||
|
||||
关于模块加载和导入背后的基础设施，是一个很重要的话题。
|
||||
但是，这个话题在介绍Angular的范围之外。在我们聚焦于讲解应用的时候，知道 *import* 和 *export* 就足够了。
|
||||
“模块加载与导入”背后的基础设施，是一个很重要的话题，但它不在Angular简介的范围内。
|
||||
我们目前的焦点是讲解应用，你只要知道*import*和*export*就够了。
|
||||
:marked
|
||||
The key take-aways are:
|
||||
|
||||
要知道的关键是：
|
||||
这里的关键点是：
|
||||
* Angular apps are composed of modules.
|
||||
* Angular应用是由模块组成的。
|
||||
* Modules export things — classes, function, values — that other modules import.
|
||||
* 模块导出一些东西 —— 类，函数，值，供其它模块导入。
|
||||
* 模块导出一些东西 —— 类，函数，值，而其它模块会导入它们。
|
||||
* We prefer to write our application as a collection of modules, each module exporting one thing.
|
||||
* 我们喜欢把应用写成一组模块，每个模块只导出一个东西。
|
||||
* 首选的写法是把应用写成一组模块，每个模块只导出一样东西。
|
||||
|
||||
The first module we write will most likely export a component.
|
||||
|
||||
|
|
@ -230,24 +231,24 @@ figure
|
|||
The shell at the application root with navigation links, that list of heroes, the hero editor ...
|
||||
they're all views controlled by Components.
|
||||
|
||||
**组件** 控制屏幕中的补丁大的一小块儿地方，我们称之为 *视图* 。
|
||||
应用的“外壳”包括一些导航链接、一个英雄列表、英雄编辑器…… 它们都是被组件控制的视图。
|
||||
**组件**控制屏幕中补丁那么大的一小块儿地方，这块儿地方我们称之为*视图*。
|
||||
应用的“外壳”包括一些导航链接、英雄列表、英雄编辑器…… 它们都是由组件控制的视图。
|
||||
|
||||
We define a Component's application logic - what it does to support the view - inside a class.
|
||||
The class interacts with the view through an API of properties and methods.
|
||||
|
||||
我们定义了一个组件的应用逻辑 —— 它被用来为视图提供支持 —— 放在类中。
|
||||
组件用一些由属性和方法组成的API与视图交互。
|
||||
我们定义了一个组件的应用逻辑（它被用来为视图提供支持）放在类中。
|
||||
组件通过一些由属性和方法组成的API与视图交互。
|
||||
|
||||
<a id="component-code"></a>
|
||||
|
||||
A `HeroListComponent`, for example, might have a `heroes` property that returns an array of heroes
|
||||
that it acquired from a service.
|
||||
It might have a `selectHero()` method that sets a `selectedHero` property when the user clicks on a hero from that list.
|
||||
It might be a class like this:
|
||||
|
||||
<a id="component-code"></a>
|
||||
比如，`HeroListComponent`组件，可能有一个`heroes`属性，它返回一个英雄的数组，这个数据是从服务中取得的。
|
||||
它还可能有一个`selectHero()`方法，用来在用户从列表中点击一个英雄时设置`selectedHero`属性。
|
||||
比如，`HeroListComponent`组件，可能有一个`heroes`属性，它返回一个英雄的数组，而这些数据是从服务中取得的。
|
||||
它可能还有一个`selectHero()`方法，当用户从列表中点击一个英雄时，用它来设置`selectedHero`属性。
|
||||
它可能是像这样的一个类：
|
||||
|
||||
+makeExample('architecture/ts/app/hero-list.component.ts', 'class', 'app/hero-list.component.ts')
|
||||
|
|
@ -255,8 +256,8 @@ figure
|
|||
Angular creates, updates, and destroys components as the user moves through the application.
|
||||
The developer can take action at each moment in this lifecycle through optional [Lifecycle Hooks](lifecycle-hooks.html).
|
||||
|
||||
当用户在这个应用中“移动”时，Angular会创建、更新、销毁组件。
|
||||
开发人员还可以通过[生命周期钩子](lifecycle-hooks.html)在组件生命周期的每个时间点做出自己的处理。
|
||||
当用户在这个应用中“移动”时，Angular会创建、更新和销毁组件。
|
||||
开发人员可以通过[生命周期钩子](lifecycle-hooks.html)在组件生命周期的各个时间点上插入自己的操作。
|
||||
.l-sub-section
|
||||
:marked
|
||||
We're not showing those hooks in this example
|
||||
|
|
@ -268,8 +269,8 @@ figure
|
|||
For the moment, have faith that Angular will call the constructor and deliver an
|
||||
appropriate `HeroService` when we need it.
|
||||
|
||||
我们可能会好奇，谁调用那个构造函数？谁为服务提供参数？
|
||||
现在，只要相信Angular就行了，它会去调用构造函数，并且在我们需要的时候交给我们一个合适的`HeroService`实例。
|
||||
我们可能会好奇，谁来调用那个构造函数？谁为服务提供参数？
|
||||
目前，只要信任Angular就行了。它会在合适的时机调用构造函数，并在我们要用的时候给出一个合适的`HeroService`实例。
|
||||
|
||||
.l-main-section
|
||||
<a id="template"></a>
|
||||
|
|
@ -282,12 +283,12 @@ figure
|
|||
We define a Component's view with its companion **template**. A template is a form of HTML
|
||||
that tells Angular how to render the Component.
|
||||
|
||||
我们通过伴随它的 **模板** 来定义组件的视图。模板是HTML的一种形式，用来告诉Angular如何渲染组件。
|
||||
我们通过组件的伴生**模板**来定义视图。模板是HTML的一种形式，它会告诉Angular如何渲染组件。
|
||||
|
||||
A template looks like regular HTML much of the time ... and then it gets a bit strange. Here is a
|
||||
template for our `HeroList` component.
|
||||
|
||||
基本上，模板看起来很像标准HTML……当然也略有一些奇怪的地方。下面是我们`HeroList`组件的一个模板。
|
||||
多数情况下，模板看起来很像标准HTML……当然也有一小点儿奇怪的地方。下面是`HeroList`组件的一个模板。
|
||||
+makeExample('architecture/ts/app/hero-list.component.html',null,'app/hero-list.component.html')
|
||||
:marked
|
||||
We recognize `<h2>` and `<div>`.
|
||||
|
|
@ -295,21 +296,21 @@ figure
|
|||
What are `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and `<hero-detail>`?
|
||||
|
||||
我们认得`<h2>`和`<div>`。
|
||||
但有一些其它的标签/属性是我们在学校中从没有听说过的。
|
||||
什么是`*ngFor`、`{{hero.name}}`、`(click)`、`[hero]`和`<hero-detail>`？
|
||||
但另外那些标签/属性是我们在学校中从没听过的。
|
||||
`*ngFor`、`{{hero.name}}`、`(click)`、`[hero]`和`<hero-detail>`都是什么鬼？
|
||||
|
||||
These are examples of Angular's [template syntax](template-syntax.html).
|
||||
We will grow accustomed to that syntax and may even learn to love it.
|
||||
We'll begin to explain it in a moment.
|
||||
|
||||
这些是Angular [模板语法](template-syntax.html) 的例子。
|
||||
我们会逐步习惯这些语法，甚至会学着爱上它。
|
||||
这些都是Angular[模板语法](template-syntax.html) 的例子。
|
||||
我们会逐渐习惯这些语法，甚至会学着爱上它。
|
||||
一会儿我们再解释它。
|
||||
|
||||
Before we do, focus attention on the last line.
|
||||
The `<hero-detail>` tag is a custom element representing the `HeroDetailComponent`.
|
||||
|
||||
在我们开始前，注意最后那行。
|
||||
在开始前，先仔细看下最后那行。
|
||||
`<hero-detail>`是一个自定义元素的标签，用来表示`HeroDetailComponent`组件。
|
||||
|
||||
The `HeroDetailComponent` is a *different* component than the `HeroListComponent` we've been reviewing.
|
||||
|
|
@ -317,8 +318,8 @@ figure
|
|||
hero that the user selects from the list presented by the `HeroListComponent`.
|
||||
The `HeroDetailComponent` is a **child** of the `HeroListComponent`.
|
||||
|
||||
`HeroDetailComponent`是和我们审视过的`HeroListComponent` *不同* 的组件。
|
||||
`HeroDetailComponent`（未展示代码）展现一个特定英雄的情况，这个英雄是用户从`HeroListComponent`所展示的列表中选择的。
|
||||
`HeroDetailComponent`跟我们以前回顾过的`HeroListComponent`是*不同*的组件。
|
||||
`HeroDetailComponent`（未展示代码）用于展现一个特定英雄的情况，这个英雄是用户从`HeroListComponent`列表中选择的。
|
||||
`HeroDetailComponent`是`HeroListComponent`的*子组件*。
|
||||
|
||||
figure
|
||||
|
|
@ -327,14 +328,13 @@ figure
|
|||
Notice how `<hero-detail>` rests comfortably among the HTML elements we already know.
|
||||
We can mix ... and will mix ... our custom components with native HTML in the same layouts.
|
||||
|
||||
注意：`<hero-detail>`是多么和谐的出现在我们已经知道的那些HTML元素中。
|
||||
我们在同一个布局中，可以混合……而且还将混合……我们的自定义组件与原生HTML。
|
||||
注意：`<hero-detail>`竟如此和谐的出现在那些已知的HTML元素中。
|
||||
在同一个设计中，我们能混用……也将继续混用……自定义组件与原生HTML。
|
||||
|
||||
And in this manner we can and will compose complex component trees to build out our richly featured application.
|
||||
|
||||
在这种方式下，我们能而且将会组合出复杂的组件树，来构建我们那些丰富多彩的应用。
|
||||
在这种方式下，我们能而且将组合出复杂的组件树，来构建那些丰富多彩的应用。
|
||||
<br clear="all">
|
||||
|
||||
.l-main-section
|
||||
<a id="metadata"></a>
|
||||
:marked
|
||||
|
|
@ -350,35 +350,35 @@ figure
|
|||
[Looking back](#component-code) at the `HeroListComponent`, we see that it's just a class.
|
||||
There is no evidence of a framework, no "Angular" in it at all.
|
||||
|
||||
[回头看看](#component-code)`HeroListComponent`，我们就明白，它只是一个类。
|
||||
毫无框架的迹象，里面完全没有出现"Angular"。
|
||||
[回头看看](#component-code)`HeroListComponent`就会明白：它只是一个类。
|
||||
一点框架的痕迹也没有，里面完全没有出现"Angular"的字样。
|
||||
|
||||
In fact, it really is *just a class*. It's not a component until we *tell Angular about it*.
|
||||
|
||||
实际上，它真的只是一个类。直到我们 *告诉Angular这一点* ，否则就没有组件。
|
||||
实际上，它真的*只是一个类*。直到我们*告诉Angular*这一点，它才会成为组件。
|
||||
|
||||
We tell Angular that `HeroListComponent` is a component by attaching **metadata** to the class.
|
||||
|
||||
通过把 **元数据** 附加到类，我们告诉Angular：`HeroListComponent`是个组件。
|
||||
只要把**元数据**附加到这个类，我们就相当于告诉Angular：`HeroListComponent`是个组件。
|
||||
|
||||
The easy way to attach metadata in TypeScript is with a **decorator**.
|
||||
Here's some metadata for `HeroListComponent`:
|
||||
|
||||
TypeScript中，附加元数据的简单方式是 **装饰器(decorator)** 。
|
||||
在TypeScript中，**装饰器(decorator)**是附加元数据的简易途径。
|
||||
下面就是`HeroListComponent`的一些元数据。
|
||||
+makeExample('architecture/ts/app/hero-list.component.ts', 'metadata', 'app/hero-list.component.ts (元数据)')
|
||||
:marked
|
||||
Here we see the `@Component` decorator which (no surprise) identifies the class
|
||||
immediately below it as a Component class.
|
||||
|
||||
这里我们看到`@Component`装饰器（理所当然的）标记出紧跟着它的这个类是一个组件类。
|
||||
这里我们看到`@Component`装饰器（毫无悬念的）把紧随其后的类标记成了组件类。
|
||||
|
||||
A decorator is a function. Decorators often have a configuration parameter.
|
||||
The `@Component` decorator takes a required configuration object with the
|
||||
information Angular needs to create and present the component and its view.
|
||||
|
||||
装饰器是一个函数。装饰器通常还有配置参数。
|
||||
`@Component`装饰器可以带一个配置对象，这些信息会被Angular用来创建和展示组件及其视图。
|
||||
装饰器是一个函数。装饰器通常还带有配置参数。
|
||||
`@Component`装饰器可以接受一个配置对象，Angular会基于这些信息创建和展示组件及其视图。
|
||||
|
||||
Here we see a few of the possible `@Component` configuration options:
|
||||
|
||||
|
|
|
|||
|
|
@ -210,9 +210,9 @@ table(width="100%")
|
|||
Post *documentation* issues and pull requests on the
|
||||
[angular.io](https://github.com/angular/angular.io) github repository.
|
||||
|
||||
如果是*文档方面*的问题或Pull Requests，请到Github上的[angular.io](https://github.com/angular/angular.io)仓库。
|
||||
如果有*文档方面*的问题或Pull Requests，请到Github上的[angular.io](https://github.com/angular/angular.io)仓库。
|
||||
|
||||
Post issues with *Angular 2 itself* to the [angular](https://github.com/angular/angular) github repository.
|
||||
|
||||
如果是*Angular 2本身*的问题，请到Github上的[angular](https://github.com/angular/angular)仓库。
|
||||
如果有*Angular 2本身*的问题，请到Github上的[angular](https://github.com/angular/angular)仓库。
|
||||
// #enddocregion the-rest
|
||||
|
|
|
|||
|
|
@ -5,3 +5,9 @@
|
|||
.original-english-debug {
|
||||
border-bottom: 1px dashed red;
|
||||
}
|
||||
|
||||
.translate-cn {
|
||||
em {
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,15 +11,32 @@
|
|||
}
|
||||
}
|
||||
node.title = prevNode.innerText;
|
||||
node.classList.add('translate');
|
||||
node.classList.add('translate-cn');
|
||||
}
|
||||
});
|
||||
|
||||
function isPureEnglish(text) {
|
||||
return /^[\1-\255—’“”]*$/.test(text);
|
||||
return /^[\1-\255—’“”ç]*$/.test(text);
|
||||
}
|
||||
|
||||
function attributesToString(node) {
|
||||
return _.chain(node.attributes)
|
||||
.map(function (value) {
|
||||
if (value.name === 'id') {
|
||||
return '';
|
||||
} else {
|
||||
return value.name + '=' + value.value;
|
||||
}
|
||||
})
|
||||
.sortBy()
|
||||
.value()
|
||||
.join(';');
|
||||
}
|
||||
|
||||
function isClonedNode(node1, node2) {
|
||||
return node1.parentNode === node2.parentNode && node1.tagName === node2.tagName && node1.className === node2.className;
|
||||
return node1.tagName === node2.tagName &&
|
||||
attributesToString(node1) === attributesToString(node2.attributes);
|
||||
}
|
||||
|
||||
function indexOf(node) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue