fix: 修正自动翻译结果
This commit is contained in:
Zhicheng Wang
parent
d7d3589052
commit
51bd598826
|
|
@ -62,7 +62,9 @@ The following table lists some of the key AngularJS template features with their
|
|||
### 绑定/插值表达式
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
Your favorite hero is: {{vm.favoriteHero}}
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, an expression in curly braces denotes one-way binding.
|
||||
|
|
@ -116,7 +118,9 @@ The following table lists some of the key AngularJS template features with their
|
|||
### 过滤器
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
<td>{{movie.title | uppercase}}</td>
|
||||
|
||||
</code-example>
|
||||
|
||||
To filter output in AngularJS templates, use the pipe character (|) and one or more filters.
|
||||
|
|
@ -161,9 +165,11 @@ The following table lists some of the key AngularJS template features with their
|
|||
### 局部变量
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<tr ng-repeat="movie in vm.movies">
|
||||
<td>{{movie.title}}</td>
|
||||
</tr>
|
||||
|
||||
</code-example>
|
||||
|
||||
Here, `movie` is a user-defined local variable.
|
||||
|
|
@ -240,7 +246,9 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### ng-app
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
<body ng-app="movieHunter">
|
||||
|
||||
</code-example>
|
||||
|
||||
The application startup process is called **bootstrapping**.
|
||||
|
|
@ -263,6 +271,7 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### 引导
|
||||
|
||||
<code-example hideCopy path="ajs-quick-reference/src/main.ts" title="main.ts" linenums="false"></code-example>
|
||||
|
||||
<br>
|
||||
|
||||
<code-example hideCopy path="ajs-quick-reference/src/app/app.module.1.ts" title="app.module.ts" linenums="false"></code-example>
|
||||
|
|
@ -286,9 +295,11 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### ng-class
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<div ng-class="{active: isActive}">
|
||||
<div ng-class="{active: isActive,
|
||||
shazam: isImportant}">
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, the `ng-class` directive includes/excludes CSS classes
|
||||
|
|
@ -350,8 +361,10 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### ng-click
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<button ng-click="vm.toggleImage()">
|
||||
<button ng-click="vm.toggleImage($event)">
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, the `ng-click` directive allows you to specify custom behavior when an element is clicked.
|
||||
|
|
@ -420,7 +433,9 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### ng-controller
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<div ng-controller="MovieListCtrl as vm">
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, the `ng-controller` directive attaches a controller to the view.
|
||||
|
|
@ -491,7 +506,9 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### ng-href
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<a ng-href="{{ angularDocsUrl }}">Angular Docs</a>
|
||||
|
||||
</code-example>
|
||||
|
||||
The `ng-href` directive allows AngularJS to preprocess the `href` property so that it
|
||||
|
|
@ -505,7 +522,9 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
在AngularJS 中，`ng-href`通常用来作为导航的一部分，激活一个路由。
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<a ng-href="#{{ moviesHash }}">Movies</a>
|
||||
|
||||
</code-example>
|
||||
|
||||
Routing is handled differently in Angular.
|
||||
|
|
@ -555,7 +574,9 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### ng-if
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<table ng-if="movies.length">
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, the `ng-if` directive removes or recreates a portion of the DOM,
|
||||
|
|
@ -602,7 +623,9 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### ng-model
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<input ng-model="vm.favoriteHero"/>
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, the `ng-model` directive binds a form control to a property in the controller associated with the template.
|
||||
|
|
@ -642,7 +665,9 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### ng-repeat
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<tr ng-repeat="movie in vm.movies">
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, the `ng-repeat` directive repeats the associated DOM element
|
||||
|
|
@ -694,9 +719,11 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### ng-show
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<h3 ng-show="vm.favoriteHero">
|
||||
Your favorite hero is: {{vm.favoriteHero}}
|
||||
</h3>
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, the `ng-show` directive shows or hides the associated DOM element, based on
|
||||
|
|
@ -749,7 +776,9 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### ng-src
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<img ng-src="{{movie.imageurl}}">
|
||||
|
||||
</code-example>
|
||||
|
||||
The `ng-src` directive allows AngularJS to preprocess the `src` property so that it
|
||||
|
|
@ -790,7 +819,9 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### ng-style
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<div ng-style="{color: colorPreference}">
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, the `ng-style` directive sets a CSS style on an HTML element
|
||||
|
|
@ -846,6 +877,7 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
### ng-switch
|
||||
|
||||
<code-example hideCopy format="">
|
||||
|
||||
<div ng-switch="vm.favoriteHero &&
|
||||
vm.checkMovieHero(vm.favoriteHero)">
|
||||
<div ng-switch-when="true">
|
||||
|
|
@ -858,6 +890,7 @@ AngularJS 为模板提供了七十多个内置指令。
|
|||
Please enter your favorite hero.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, the `ng-switch` directive swaps the contents of
|
||||
|
|
@ -963,7 +996,9 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
|
|||
### currency
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
<td>{{movie.price | currency}}</td>
|
||||
|
||||
</code-example>
|
||||
|
||||
Formats a number as currency.
|
||||
|
|
@ -993,7 +1028,9 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
|
|||
### date
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
<td>{{movie.releaseDate | date}}</td>
|
||||
|
||||
</code-example>
|
||||
|
||||
Formats a date to a string based on the requested format.
|
||||
|
|
@ -1023,7 +1060,9 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
|
|||
### filter
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
<tr ng-repeat="movie in movieList | filter: {title:listFilter}">
|
||||
|
||||
</code-example>
|
||||
|
||||
Selects a subset of items from the defined collection, based on the filter criteria.
|
||||
|
|
@ -1055,7 +1094,9 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
|
|||
### json
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
<pre>{{movie | json}}</pre>
|
||||
|
||||
</code-example>
|
||||
|
||||
Converts a JavaScript object into a JSON string. This is useful for debugging.
|
||||
|
|
@ -1085,7 +1126,9 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
|
|||
### limitTo
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
<tr ng-repeat="movie in movieList | limitTo:2:0">
|
||||
|
||||
</code-example>
|
||||
|
||||
Selects up to the first parameter (2) number of items from the collection
|
||||
|
|
@ -1121,7 +1164,9 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
|
|||
### lowercase
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
<div>{{movie.title | lowercase}}</div>
|
||||
|
||||
</code-example>
|
||||
|
||||
Converts the string to lowercase.
|
||||
|
|
@ -1151,7 +1196,9 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
|
|||
### number
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
<td>{{movie.starRating | number}}</td>
|
||||
|
||||
</code-example>
|
||||
|
||||
Formats a number as text.
|
||||
|
|
@ -1189,7 +1236,9 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
|
|||
### orderBy
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
<tr ng-repeat="movie in movieList | orderBy : 'title'">
|
||||
|
||||
</code-example>
|
||||
|
||||
Displays the collection in the order specified by the expression.
|
||||
|
|
@ -1273,9 +1322,11 @@ The Angular code is shown using TypeScript.
|
|||
### IIFE
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
(function () {
|
||||
...
|
||||
}());
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, an immediately invoked function expression (or IIFE) around controller code
|
||||
|
|
@ -1314,7 +1365,9 @@ The Angular code is shown using TypeScript.
|
|||
### Angular模块
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
angular.module("movieHunter", ["ngRoute"]);
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, an Angular module keeps track of controllers, services, and other code.
|
||||
|
|
@ -1359,11 +1412,13 @@ The Angular code is shown using TypeScript.
|
|||
### 控制器注册
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
angular
|
||||
.module("movieHunter")
|
||||
.controller("MovieListCtrl",
|
||||
["movieService",
|
||||
MovieListCtrl]);
|
||||
|
||||
</code-example>
|
||||
|
||||
AngularJS has code in each controller that looks up an appropriate Angular module
|
||||
|
|
@ -1415,8 +1470,10 @@ The Angular code is shown using TypeScript.
|
|||
### 控制器函数
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
function MovieListCtrl(movieService) {
|
||||
}
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, you write the code for the model and methods in a controller function.
|
||||
|
|
@ -1459,9 +1516,11 @@ The Angular code is shown using TypeScript.
|
|||
### 依赖注入
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
MovieListCtrl.$inject = ['MovieService'];
|
||||
function MovieListCtrl(movieService) {
|
||||
}
|
||||
|
||||
</code-example>
|
||||
|
||||
In AngularJS, you pass in any dependencies as controller function arguments.
|
||||
|
|
@ -1557,7 +1616,9 @@ also encapsulate a style sheet within a specific component.
|
|||
### Link 标签
|
||||
|
||||
<code-example hideCopy>
|
||||
|
||||
<link href="styles.css" rel="stylesheet" />
|
||||
|
||||
</code-example>
|
||||
|
||||
AngularJS, uses a `link` tag in the head section of the `index.html` file
|
||||
|
|
|
|||
|
|
@ -277,8 +277,10 @@ These two common animations have their own aliases:
|
|||
这两个常见的动画有自己的别名：
|
||||
|
||||
<code-example language="typescript">
|
||||
|
||||
transition(':enter', [ ... ]); // void => *
|
||||
transition(':leave', [ ... ]); // * => void
|
||||
|
||||
</code-example>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -35,8 +35,10 @@ Angular offers two ways to compile your application:
|
|||
JIT compilation is the default when you run the _build-only_ or the _build-and-serve-locally_ CLI commands:
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
|
||||
ng build
|
||||
ng serve
|
||||
|
||||
</code-example>
|
||||
|
||||
{@a compile}
|
||||
|
|
@ -44,8 +46,10 @@ JIT compilation is the default when you run the _build-only_ or the _build-and-s
|
|||
For AOT compilation, append the `--aot` flags to the _build-only_ or the _build-and-serve-locally_ CLI commands:
|
||||
|
||||
<code-example language="sh" class="code-shell">
|
||||
|
||||
ng build --aot
|
||||
ng serve --aot
|
||||
|
||||
</code-example>
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
|
@ -1085,6 +1089,7 @@ import { calculateValue } from './utilities';
|
|||
To correct this error, export a function from the module and refer to the function in a `useFactory` provider instead.
|
||||
|
||||
<code-example linenums="false">
|
||||
|
||||
// CORRECTED
|
||||
import { calculateValue } from './utilities';
|
||||
|
||||
|
|
@ -1100,6 +1105,7 @@ export function someValueFactory() {
|
|||
{ provide: SomeValue, useFactory: someValueFactory }
|
||||
]
|
||||
...
|
||||
|
||||
</code-example>
|
||||
|
||||
<hr>
|
||||
|
|
@ -1119,6 +1125,7 @@ The compiler does not support references to variables assigned by [destructuring
|
|||
For example, you cannot write something like this:
|
||||
|
||||
<code-example linenums="false">
|
||||
|
||||
// ERROR
|
||||
import { configuration } from './configuration';
|
||||
|
||||
|
|
@ -1130,11 +1137,13 @@ const {foo, bar} = configuration;
|
|||
{provide: Bar, useValue: bar},
|
||||
]
|
||||
...
|
||||
|
||||
</code-example>
|
||||
|
||||
To correct this error, refer to non-destructured values.
|
||||
|
||||
<code-example linenums="false">
|
||||
|
||||
// CORRECTED
|
||||
import { configuration } from './configuration';
|
||||
...
|
||||
|
|
@ -1143,6 +1152,7 @@ import { configuration } from './configuration';
|
|||
{provide: Bar, useValue: configuration.bar},
|
||||
]
|
||||
...
|
||||
|
||||
</code-example>
|
||||
|
||||
<hr>
|
||||
|
|
@ -1188,6 +1198,7 @@ you can finesse the problem in four steps:
|
|||
Here's an illustrative example.
|
||||
|
||||
<code-example linenums="false">
|
||||
|
||||
// CORRECTED
|
||||
import { Inject } from '@angular/core';
|
||||
|
||||
|
|
@ -1203,6 +1214,7 @@ export function _window() { return window; }
|
|||
export class MyComponent {
|
||||
constructor (@Inject(WINDOW) private win: Window) { ... }
|
||||
}
|
||||
|
||||
</code-example>
|
||||
|
||||
The `Window` type in the constructor is no longer a problem for the compiler because it
|
||||
|
|
@ -1211,6 +1223,7 @@ uses the `@Inject(WINDOW)` to generate the injection code.
|
|||
Angular does something similar with the `DOCUMENT` token so you can inject the browser's `document` object (or an abstraction of it, depending upon the platform in which the application runs).
|
||||
|
||||
<code-example linenums="false">
|
||||
|
||||
import { Inject } from '@angular/core';
|
||||
import { DOCUMENT } from '@angular/platform-browser';
|
||||
|
||||
|
|
@ -1218,6 +1231,7 @@ import { DOCUMENT } from '@angular/platform-browser';
|
|||
export class MyComponent {
|
||||
constructor (@Inject(DOCUMENT) private doc: Document) { ... }
|
||||
}
|
||||
|
||||
</code-example>
|
||||
|
||||
<hr>
|
||||
|
|
@ -1253,6 +1267,7 @@ that you referenced in metadata.
|
|||
The compiler can understand simple enum values but not complex values such as those derived from computed properties.
|
||||
|
||||
<code-example linenums="false">
|
||||
|
||||
// ERROR
|
||||
enum Colors {
|
||||
Red = 1,
|
||||
|
|
@ -1267,6 +1282,7 @@ enum Colors {
|
|||
{ provide: StrongColor, useValue: Colors.Blue } // bad
|
||||
]
|
||||
...
|
||||
|
||||
</code-example>
|
||||
|
||||
Avoid referring to enums with complicated initializers or computed properties.
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<header class="api-header">
|
||||
|
||||
<h1><label class="api-status-label experimental">experimental</label><label class="api-type-label class">class</label>Class Name</h1>
|
||||
<h1><label class="api-status-label experimental">experimental</label><label class="api-type-label class">class</label>Class Name</h1>
|
||||
|
||||
</header>
|
||||
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
<p>
|
||||
|
||||
Class description goes here. This is a short and to the point one or two sentence description that easily introduces the reader to the class.
|
||||
Class description goes here. This is a short and to the point one or two sentence description that easily introduces the reader to the class.
|
||||
|
||||
</p>
|
||||
|
||||
|
|
@ -47,9 +47,9 @@
|
|||
|
||||
<p>
|
||||
|
||||
The longer class description goes here which can include multiple paragraphs.
|
||||
The longer class description goes here which can include multiple paragraphs.
|
||||
|
||||
</p>
|
||||
</p>
|
||||
|
||||
</p>Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.</p>
|
||||
|
||||
|
|
@ -100,6 +100,7 @@
|
|||
<h2>Constructor</h2>
|
||||
|
||||
<code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0">
|
||||
|
||||
<aio-code class="simple-code"><pre class="prettyprint lang-">
|
||||
<code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
|
||||
</span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln">
|
||||
|
|
@ -242,17 +243,17 @@
|
|||
|
||||
<p>
|
||||
|
||||
Description goes here
|
||||
Description goes here
|
||||
|
||||
</p>
|
||||
</p>
|
||||
|
||||
<br>
|
||||
|
||||
<p>
|
||||
|
||||
Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.
|
||||
Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.
|
||||
|
||||
</p>
|
||||
</p>
|
||||
|
||||
</td>
|
||||
|
||||
|
|
@ -282,18 +283,20 @@
|
|||
|
||||
<p>
|
||||
|
||||
Description goes here
|
||||
Description goes here
|
||||
|
||||
</p>
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h5>Declaration</h5>
|
||||
|
||||
<code-example language="ts" hidecopy="true" ng-version="5.2.0">
|
||||
|
||||
<aio-code class="simple-code"><pre class="prettyprint lang-ts">
|
||||
<code class="animated fadeIn"><span class="kwd">class</span><span class="pln"> </span><a href="api/animations/AnimationBuilder" class="code-anchor"><span class="typ">AnimationBuilder</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln"></span><a class="code-anchor" href="api/animations/AnimationBuilder#build"><span class="pln">build</span><span class="pun">(</span><span class="pln">animation</span><span class="pun">:</span><span class="pln"> </span><span class="typ">AnimationMetadata</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> </span><span class="typ">AnimationMetadata</span><span class="pun">[]):</span><span class="pln"> </span><span class="typ">AnimationFactory</span></a><span class="pln"></span><span class="pun">}</span></code></pre>
|
||||
</aio-code>
|
||||
|
||||
</code-example>
|
||||
|
||||
<h6>Parameters</h6>
|
||||
|
|
@ -302,17 +305,17 @@
|
|||
|
||||
<p>
|
||||
|
||||
Returns information and results goes here.
|
||||
Returns information and results goes here.
|
||||
|
||||
</p>
|
||||
</p>
|
||||
|
||||
<h6>Errors</h6>
|
||||
|
||||
<p>
|
||||
|
||||
Error information goes here
|
||||
Error information goes here
|
||||
|
||||
</p>
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
|
|
@ -327,6 +330,7 @@
|
|||
<td>
|
||||
|
||||
<code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0">
|
||||
|
||||
<aio-code class="simple-code"><pre class="prettyprint lang-">
|
||||
<code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
|
||||
</span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln">
|
||||
|
|
@ -347,6 +351,7 @@
|
|||
<td>
|
||||
|
||||
<code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0">
|
||||
|
||||
<aio-code class="simple-code"><pre class="prettyprint lang-">
|
||||
<code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
|
||||
</span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln">
|
||||
|
|
@ -371,9 +376,9 @@
|
|||
|
||||
<p>
|
||||
|
||||
Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.
|
||||
Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball. Ham hock picanha burgdoggen pork belly rump bacon cupim. Bacon kielbasa sirloin shank strip steak ground round. Bresaola cow salami meatloaf pork chop leberkas flank turducken biltong meatball chuck pork tri-tip chicken. Ribeye corned beef shoulder, meatloaf strip steak jerky porchetta capicola alcatra ham.
|
||||
|
||||
</p>
|
||||
</p>
|
||||
|
||||
</td>
|
||||
|
||||
|
|
@ -387,11 +392,12 @@
|
|||
|
||||
<p>
|
||||
|
||||
Intro description text about what the example is and how it can be used.
|
||||
Intro description text about what the example is and how it can be used.
|
||||
|
||||
</p>
|
||||
</p>
|
||||
|
||||
<code-example hidecopy="true" class="no-box api-heading" ng-version="5.2.0">
|
||||
|
||||
<aio-code class="simple-code"><pre class="prettyprint lang-">
|
||||
<code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">element</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">,</span><span class="pln"> keyframes</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
|
||||
</span><span class="pun">[</span><span class="pln">key</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">]:</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> </span><span class="pun">|</span><span class="pln"> number</span><span class="pun">;</span><span class="pln">
|
||||
|
|
@ -400,9 +406,9 @@
|
|||
|
||||
<p>
|
||||
|
||||
Further explanation provided as needed. Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball.
|
||||
Further explanation provided as needed. Bacon ipsum dolor amet pork belly capicola sirloin venison alcatra ground round ham hock jowl turkey picanha bresaola pancetta brisket chicken fatback. Burgdoggen kevin salami jowl shoulder jerky leberkas meatball.
|
||||
|
||||
</p>
|
||||
</p>
|
||||
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -280,9 +280,7 @@ the mouse hovers over the `p` and disappears as it moves out.
|
|||
运行本应用并确认：当把鼠标移到`p`上的时候，背景色就出现了，而移开的时候，它消失了。
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight">
|
||||
|
||||
</figure>
|
||||
|
||||
{@a bindings}
|
||||
|
|
@ -437,9 +435,7 @@ Here are the harness and directive in action.
|
|||
下面是测试程序和指令的动图。
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2">
|
||||
|
||||
</figure>
|
||||
|
||||
{@a second-property}
|
||||
|
|
@ -494,9 +490,7 @@ Here's how the harness should work when you're done coding.
|
|||
当这些代码完成时，测试程序工作时的动图如下：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight">
|
||||
|
||||
</figure>
|
||||
|
||||
## Summary
|
||||
|
|
@ -528,19 +522,12 @@ The final source code follows:
|
|||
最终的源码如下：
|
||||
|
||||
<code-tabs>
|
||||
|
||||
<code-pane title="app/app.component.ts" path="attribute-directives/src/app/app.component.ts"></code-pane>
|
||||
|
||||
<code-pane title="app/app.component.html" path="attribute-directives/src/app/app.component.html"></code-pane>
|
||||
|
||||
<code-pane title="app/highlight.directive.ts" path="attribute-directives/src/app/highlight.directive.ts"></code-pane>
|
||||
|
||||
<code-pane title="app/app.module.ts" path="attribute-directives/src/app/app.module.ts"></code-pane>
|
||||
|
||||
<code-pane title="main.ts" path="attribute-directives/src/main.ts"></code-pane>
|
||||
|
||||
<code-pane title="index.html" path="attribute-directives/src/index.html"></code-pane>
|
||||
|
||||
</code-tabs>
|
||||
|
||||
You can also experience and download the <live-example title="Attribute Directive example"></live-example>.
|
||||
|
|
@ -635,4 +622,4 @@ Now apply that reasoning to the following example:
|
|||
|
||||
|
||||
`myHighlight`属性位于左侧，它引用了`MyHighlightDirective`中一个*带别名的*属性，它不是模板所属组件的一部分，因此存在信任问题。
|
||||
所以，该属性必须带`@Input`装饰器。
|
||||
所以，该属性必须带`@Input`装饰器。
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ By convention, it is usually called `AppModule`.
|
|||
If you use the CLI to generate an app, the default `AppModule` is as follows:
|
||||
|
||||
```typescript
|
||||
|
||||
/* JavaScript imports */
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { NgModule } from '@angular/core';
|
||||
|
|
@ -83,11 +84,13 @@ this module and the other module imports this one.
|
|||
An example of what goes into a declarations array follows:
|
||||
|
||||
```typescript
|
||||
|
||||
declarations: [
|
||||
YourComponent,
|
||||
YourPipe,
|
||||
YourDirective
|
||||
],
|
||||
|
||||
```
|
||||
|
||||
A declarable can only belong to one module, so only declare it in
|
||||
|
|
|
|||
|
|
@ -81,7 +81,6 @@ Angular 支持大多数常用浏览器，包括下列版本：
|
|||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>
|
||||
|
|
@ -97,9 +96,7 @@ Angular 支持大多数常用浏览器，包括下列版本：
|
|||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>
|
||||
|
|
@ -115,7 +112,6 @@ Angular 支持大多数常用浏览器，包括下列版本：
|
|||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>
|
||||
|
|
@ -133,7 +129,6 @@ Angular 支持大多数常用浏览器，包括下列版本：
|
|||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>
|
||||
|
|
@ -151,7 +146,6 @@ Angular 支持大多数常用浏览器，包括下列版本：
|
|||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>
|
||||
|
|
@ -235,7 +229,9 @@ For example, [if you need the web animations polyfill](http://caniuse.com/#feat=
|
|||
<code-example language="sh" class="code-shell">
|
||||
|
||||
# note that the web-animations-js polyfill is only here as an example
|
||||
|
||||
# it isn't a strict requirement of Angular anymore (more below)
|
||||
|
||||
npm install --save web-animations-js
|
||||
|
||||
</code-example>
|
||||
|
|
@ -247,7 +243,9 @@ Then open the `polyfills.ts` file and un-comment the corresponding `import` stat
|
|||
<code-example title="src/polyfills.ts">
|
||||
|
||||
/**
|
||||
|
||||
* Required to support Web Animations `@angular/platform-browser/animations`.
|
||||
|
||||
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
|
||||
**/
|
||||
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
|
||||
|
|
@ -438,12 +436,10 @@ Here are the features which may require additional polyfills:
|
|||
<td>
|
||||
|
||||
[Animations](guide/animations)
|
||||
|
||||
[动画](guide/animations)
|
||||
|
||||
<br>Only if `Animation Builder` is used within the application--standard
|
||||
animation support in Angular doesn't require any polyfills (as of NG6).
|
||||
|
||||
[动画](guide/animations)
|
||||
<br>只有在应用中用到了 `Animation Builder` 时才需要；Angular 标准的动画支持是不需要任何腻子脚本的（截至 NG6）。
|
||||
|
||||
</td>
|
||||
|
|
@ -541,13 +537,9 @@ Here are the features which may require additional polyfills:
|
|||
|
||||
<td>
|
||||
|
||||
[Typed Array](guide/browser-support#typedarray)
|
||||
[Typed Array](guide/browser-support#typedarray)<br>
|
||||
|
||||
<br>
|
||||
|
||||
[Blob](guide/browser-support#blob)
|
||||
|
||||
<br>
|
||||
[Blob](guide/browser-support#blob)<br>
|
||||
|
||||
[FormData](guide/browser-support#formdata)
|
||||
|
||||
|
|
@ -828,4 +820,3 @@ If you are not using the CLI, you should add your polyfill scripts directly to t
|
|||
<!-- application polyfills -->
|
||||
|
||||
</code-example>
|
||||
|
||||
|
|
|
|||
|
|
@ -140,7 +140,7 @@ Revised samples are clearer and cover all topics discussed.
|
|||
* [Setup](guide/setup) guide:
|
||||
added (optional) instructions on how to remove _non-essential_ files.
|
||||
|
||||
[环境搭建](guide/setup)指南:
|
||||
[环境搭建](guide/setup)指南:
|
||||
添加了（可选的）步骤说明，告诉你如何移除*非核心*文件。
|
||||
|
||||
* No longer consolidate RxJS operator imports in `rxjs-extensions` file; each file should import what it needs.
|
||||
|
|
@ -429,4 +429,4 @@ The [Lifecycle Hooks](guide/lifecycle-hooks) guide is shorter, simpler, and
|
|||
draws more attention to the order in which Angular calls the hooks.
|
||||
|
||||
|
||||
[生命周期钩子](guide/lifecycle-hooks)章现在更加简短，并且对强调了Angular是以什么顺序来调用钩子方法的。
|
||||
[生命周期钩子](guide/lifecycle-hooks)章现在更加简短，并且对强调了Angular是以什么顺序来调用钩子方法的。
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -97,25 +97,39 @@ The following code snippets illustrate how the same kind of operation is defined
|
|||
|
||||
<th>
|
||||
|
||||
<td>Operation</td>
|
||||
<td>
|
||||
|
||||
<td>Observable</td>
|
||||
Operation
|
||||
|
||||
<td>Promise</td>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Observable
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Promise
|
||||
|
||||
</td>
|
||||
|
||||
</th>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>Creation</td>
|
||||
<td>
|
||||
|
||||
Creation
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>new Observable((observer) => {
|
||||
observer.next(123);
|
||||
});
|
||||
|
||||
</pre>
|
||||
});</pre>
|
||||
|
||||
</td>
|
||||
|
||||
|
|
@ -123,35 +137,45 @@ The following code snippets illustrate how the same kind of operation is defined
|
|||
|
||||
<pre>new Promise((resolve, reject) => {
|
||||
resolve(123);
|
||||
});
|
||||
|
||||
</pre>
|
||||
});</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>Transform</td>
|
||||
<td>
|
||||
|
||||
<td><pre>obs.map((value) => value * 2 );</pre></td>
|
||||
Transform
|
||||
|
||||
<td><pre>promise.then((value) => value * 2);</pre></td>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>obs.map((value) => value * 2 );</pre>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>promise.then((value) => value * 2);</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>Subscribe</td>
|
||||
<td>
|
||||
|
||||
Subscribe
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>sub = obs.subscribe((value) => {
|
||||
console.log(value)
|
||||
});
|
||||
|
||||
</pre>
|
||||
});</pre>
|
||||
|
||||
</td>
|
||||
|
||||
|
|
@ -159,24 +183,32 @@ The following code snippets illustrate how the same kind of operation is defined
|
|||
|
||||
<pre>promise.then((value) => {
|
||||
console.log(value);
|
||||
});
|
||||
|
||||
</pre>
|
||||
});</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>Unsubscribe</td>
|
||||
<td>
|
||||
|
||||
<td><pre>sub.unsubscribe();</pre></td>
|
||||
Unsubscribe
|
||||
|
||||
<td>Implied by promise resolution.</td>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>sub.unsubscribe();</pre>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Implied by promise resolution.
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
## Observables compared to events API
|
||||
|
|
@ -191,15 +223,27 @@ Here are some code samples that illustrate how the same kind of operation is def
|
|||
|
||||
<th>
|
||||
|
||||
<td>Observable</td>
|
||||
<td>
|
||||
|
||||
<td>Events API</td>
|
||||
Observable
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Events API
|
||||
|
||||
</td>
|
||||
|
||||
</th>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>Creation & cancellation</td>
|
||||
<td>
|
||||
|
||||
Creation & cancellation
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
|
|
@ -209,9 +253,7 @@ let clicks$ = fromEvent(buttonEl, ‘click’);
|
|||
let subscription = clicks$
|
||||
.subscribe(e => console.log(‘Clicked’, e))
|
||||
// Stop listening
|
||||
subscription.unsubscribe();
|
||||
|
||||
</pre>
|
||||
subscription.unsubscribe();</pre>
|
||||
|
||||
</td>
|
||||
|
||||
|
|
@ -225,24 +267,24 @@ subscription.unsubscribe();
|
|||
button.addEventListener(‘click’, handler);
|
||||
// Stop listening
|
||||
button.removeEventListener(‘click’, handler);
|
||||
|
||||
</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>Subscription</td>
|
||||
<td>
|
||||
|
||||
Subscription
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>observable.subscribe(() => {
|
||||
// notification handlers here
|
||||
});
|
||||
|
||||
</pre>
|
||||
});</pre>
|
||||
|
||||
</td>
|
||||
|
||||
|
|
@ -250,24 +292,23 @@ button.removeEventListener(‘click’, handler);
|
|||
|
||||
<pre>element.addEventListener(eventName, (event) => {
|
||||
// notification handler here
|
||||
});
|
||||
|
||||
</pre>
|
||||
});</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>Configuration</td>
|
||||
<td>
|
||||
|
||||
Configuration
|
||||
|
||||
</td>
|
||||
|
||||
<td>Listen for keystrokes, but provide a stream representing the value in the input.
|
||||
<pre>fromEvent(inputEl, 'keydown').pipe(
|
||||
map(e => e.target.value)
|
||||
);
|
||||
|
||||
</pre>
|
||||
);</pre>
|
||||
|
||||
</td>
|
||||
|
||||
|
|
@ -275,14 +316,11 @@ button.removeEventListener(‘click’, handler);
|
|||
<pre>element.addEventListener(eventName, (event) => {
|
||||
// Cannot change the passed Event into another
|
||||
// value before it gets to the handler
|
||||
});
|
||||
|
||||
</pre>
|
||||
});</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
## Observables compared to arrays
|
||||
|
|
@ -293,20 +331,31 @@ An observable produces values over time. An array is created as a static set of
|
|||
|
||||
<th>
|
||||
|
||||
<td>Observable</td>
|
||||
<td>
|
||||
|
||||
<td>Array</td>
|
||||
Observable
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Array
|
||||
|
||||
</td>
|
||||
|
||||
</th>
|
||||
|
||||
<tr>
|
||||
|
||||
<td>Given</td>
|
||||
<td>
|
||||
|
||||
Given
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>obs: ➞1➞2➞3➞5➞7</pre>
|
||||
|
||||
<pre>obsB: ➞'a'➞'b'➞'c'</pre>
|
||||
|
||||
</td>
|
||||
|
|
@ -314,21 +363,22 @@ An observable produces values over time. An array is created as a static set of
|
|||
<td>
|
||||
|
||||
<pre>arr: [1, 2, 3, 5, 7]</pre>
|
||||
|
||||
<pre>arrB: ['a', 'b', 'c']</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><pre>concat()</pre></td>
|
||||
<td>
|
||||
|
||||
<pre>concat()</pre>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>obs.concat(obsB)</pre>
|
||||
|
||||
<pre>➞1➞2➞3➞5➞7➞'a'➞'b'➞'c'</pre>
|
||||
|
||||
</td>
|
||||
|
|
@ -336,21 +386,22 @@ An observable produces values over time. An array is created as a static set of
|
|||
<td>
|
||||
|
||||
<pre>arr.concat(arrB)</pre>
|
||||
|
||||
<pre>[1,2,3,5,7,'a','b','c']</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><pre>filter()</pre></td>
|
||||
<td>
|
||||
|
||||
<pre>filter()</pre>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>obs.filter((v) => v>3)</pre>
|
||||
|
||||
<pre>➞5➞7</pre>
|
||||
|
||||
</td>
|
||||
|
|
@ -358,21 +409,22 @@ An observable produces values over time. An array is created as a static set of
|
|||
<td>
|
||||
|
||||
<pre>arr.filter((v) => v>3)</pre>
|
||||
|
||||
<pre>[5, 7]</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><pre>find()</pre></td>
|
||||
<td>
|
||||
|
||||
<pre>find()</pre>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>obs.find((v) => v>3)</pre>
|
||||
|
||||
<pre>➞5</pre>
|
||||
|
||||
</td>
|
||||
|
|
@ -380,21 +432,22 @@ An observable produces values over time. An array is created as a static set of
|
|||
<td>
|
||||
|
||||
<pre>arr.find((v) => v>10)</pre>
|
||||
|
||||
<pre>5</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><pre>findIndex()</pre></td>
|
||||
<td>
|
||||
|
||||
<pre>findIndex()</pre>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>obs.findIndex((v) => v>3)</pre>
|
||||
|
||||
<pre>➞3</pre>
|
||||
|
||||
</td>
|
||||
|
|
@ -402,16 +455,18 @@ An observable produces values over time. An array is created as a static set of
|
|||
<td>
|
||||
|
||||
<pre>arr.findIndex((v) => v>3)</pre>
|
||||
|
||||
<pre>3</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><pre>forEach()</pre></td>
|
||||
<td>
|
||||
|
||||
<pre>forEach()</pre>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
|
|
@ -422,9 +477,7 @@ An observable produces values over time. An array is created as a static set of
|
|||
2
|
||||
3
|
||||
4
|
||||
5
|
||||
|
||||
</pre>
|
||||
5</pre>
|
||||
|
||||
</td>
|
||||
|
||||
|
|
@ -437,22 +490,22 @@ An observable produces values over time. An array is created as a static set of
|
|||
2
|
||||
3
|
||||
4
|
||||
5
|
||||
|
||||
</pre>
|
||||
5</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><pre>map()</pre></td>
|
||||
<td>
|
||||
|
||||
<pre>map()</pre>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>obs.map((v) => -v)</pre>
|
||||
|
||||
<pre>➞-1➞-2➞-3➞-5➞-7</pre>
|
||||
|
||||
</td>
|
||||
|
|
@ -460,21 +513,22 @@ An observable produces values over time. An array is created as a static set of
|
|||
<td>
|
||||
|
||||
<pre>arr.map((v) => -v)</pre>
|
||||
|
||||
<pre>[-1, -2, -3, -5, -7]</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><pre>reduce()</pre></td>
|
||||
<td>
|
||||
|
||||
<pre>reduce()</pre>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<pre>obs.scan((s,v)=> s+v, 0)</pre>
|
||||
|
||||
<pre>➞1➞3➞6➞11➞18</pre>
|
||||
|
||||
</td>
|
||||
|
|
@ -482,12 +536,9 @@ An observable produces values over time. An array is created as a static set of
|
|||
<td>
|
||||
|
||||
<pre>arr.reduce((s,v) => s+v, 0)</pre>
|
||||
|
||||
<pre>18</pre>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
|
|
|
|||
|
|
@ -77,13 +77,13 @@ The running application displays three heroes:
|
|||
运行应用程序会显示三个英雄：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/component-interaction/parent-to-child.png" alt="Parent-to-child">
|
||||
|
||||
</figure>
|
||||
|
||||
<h3 class="no-toc">Test it</h3>
|
||||
|
||||
<h3 class="no-toc">测试一下</h3>
|
||||
|
||||
E2E test that all children were instantiated and displayed as expected:
|
||||
|
||||
端到端测试，用于确保所有的子组件都像所期待的那样被初始化并显示出来。
|
||||
|
|
@ -124,13 +124,13 @@ Here's the `NameParentComponent` demonstrating name variations including a name
|
|||
</code-example>
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/component-interaction/setter.png" alt="Parent-to-child-setter">
|
||||
|
||||
</figure>
|
||||
|
||||
<h3 class="no-toc">Test it</h3>
|
||||
|
||||
<h3 class="no-toc">测试一下</h3>
|
||||
|
||||
E2E tests of input property setter with empty and non-empty names:
|
||||
|
||||
端到端测试：输入属性的setter，分别使用空名字和非空名字。
|
||||
|
|
@ -186,9 +186,7 @@ Here's the output of a button-pushing sequence:
|
|||
下面是点击按钮的结果。
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/component-interaction/parent-to-child-on-changes.gif" alt="Parent-to-child-onchanges">
|
||||
|
||||
</figure>
|
||||
|
||||
<h3 class="no-toc">Test it</h3>
|
||||
|
|
@ -248,9 +246,7 @@ and the method processes it:
|
|||
框架(Angular)把事件参数(用`$event`表示)传给事件处理方法，这个方法会处理：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/component-interaction/child-to-parent.gif" alt="Child-to-parent">
|
||||
|
||||
</figure>
|
||||
|
||||
<h3 class="no-toc">Test it</h3>
|
||||
|
|
@ -282,6 +278,7 @@ as seen in the following example.
|
|||
父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法。但可以在父组件模板里，新建一个本地变量来代表子组件，然后利用这个变量来读取子组件的属性和调用子组件的方法，如下例所示。
|
||||
|
||||
{@a countdown-timer-example}
|
||||
|
||||
The following is a child `CountdownTimerComponent` that repeatedly counts down to zero and launches a rocket.
|
||||
It has `start` and `stop` methods that control the clock and it displays a
|
||||
countdown status message in its own template.
|
||||
|
|
@ -321,9 +318,7 @@ Here we see the parent and child working together.
|
|||
下面是父组件和子组件一起工作时的效果。
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/component-interaction/countdown-timer-anim.gif" alt="countdown timer">
|
||||
|
||||
</figure>
|
||||
|
||||
{@a countdown-tests}
|
||||
|
|
@ -512,9 +507,7 @@ facilitated by the service:
|
|||
*History*日志证明了：在父组件`MissionControlComponent`和子组件`AstronautComponent`之间，信息通过该服务实现了双向传递。
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/component-interaction/bidirectional-service.gif" alt="bidirectional-service">
|
||||
|
||||
</figure>
|
||||
|
||||
<h3 class="no-toc">Test it</h3>
|
||||
|
|
@ -533,4 +526,4 @@ and verify that the history meets expectations:
|
|||
[Back to top](guide/component-interaction#top)
|
||||
|
||||
|
||||
[回到顶部](guide/component-interaction#top)
|
||||
[回到顶部](guide/component-interaction#top)
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ This page describes how to load and apply these component styles.
|
|||
|
||||
You can run the <live-example></live-example> in Stackblitz and download the code from there.
|
||||
|
||||
你可以在 Stackblitz 上运行本章这些代码的<live-example></live-example>并下载这些代码。
|
||||
运行<live-example></live-example>来试用本页的代码。
|
||||
|
||||
## Using component styles
|
||||
|
||||
|
|
@ -290,11 +290,8 @@ to a component's `@Component` decorator:
|
|||
我们可以通过把外部 CSS 文件添加到 `@Component` 的 `styleUrls` 属性中来加载外部样式。
|
||||
|
||||
<code-tabs>
|
||||
|
||||
<code-pane title="src/app/hero-app.component.ts (CSS in file)" path="component-styles/src/app/hero-app.component.1.ts"></code-pane>
|
||||
|
||||
<code-pane title="src/app/hero-app.component.css" path="component-styles/src/app/hero-app.component.css"></code-pane>
|
||||
|
||||
</code-tabs>
|
||||
|
||||
<div class="alert is-critical">
|
||||
|
|
@ -541,4 +538,4 @@ These extra selectors enable the scoping rules described in this page.
|
|||
|
||||
|
||||
这些就是我们写的那些样式被处理后的结果，于是每个选择器都被增加了`_nghost`或`_ngcontent`属性选择器。
|
||||
在这些附加选择器的帮助下，我们实现了本指南中所描述的这些作用域规则。
|
||||
在这些附加选择器的帮助下，我们实现了本指南中所描述的这些作用域规则。
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@ This cookbook explores many of the features of Dependency Injection (DI) in Angu
|
|||
|
||||
{@a toc}
|
||||
|
||||
See the <live-example name="dependency-injection-in-action"></live-example> of the code in this cookbook.
|
||||
See the <live-example name="dependency-injection-in-action"></live-example>
|
||||
of the code in this cookbook.
|
||||
|
||||
到<live-example name="dependency-injection-in-action"></live-example>查看本烹饪书的源码。
|
||||
|
||||
|
|
@ -150,9 +151,7 @@ Once all the dependencies are in place, the `AppComponent` displays the user inf
|
|||
一旦所有依赖都准备好了，`AppComponent`就会显示用户信息：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/dependency-injection-in-action/logged-in-user.png" alt="Logged In User">
|
||||
|
||||
</figure>
|
||||
|
||||
{@a injectable-1}
|
||||
|
|
@ -307,6 +306,7 @@ This is called *sandboxing* because each service and component instance has its
|
|||
每个服务有自己的工作状态，与其它组件的服务和状态隔离。我们称作*沙盒化*，因为每个服务和组件实例都在自己的沙盒里运行。
|
||||
|
||||
{@a hero-bios-component}
|
||||
|
||||
Imagine a `HeroBiosComponent` that presents three instances of the `HeroBioComponent`.
|
||||
|
||||
想象一下，一个`HeroBiosComponent`组件显示三个`HeroBioComponent`的实例。
|
||||
|
|
@ -345,14 +345,13 @@ And the template displays this data-bound property.
|
|||
|
||||
父组件`HeroBiosComponent`把一个值绑定到`heroId`。`ngOnInit`把该`id`传递到服务，然后服务获取和缓存英雄。`hero`属性的getter从服务里面获取缓存的英雄，并在模板里显示它绑定到属性值。
|
||||
|
||||
Find this example in <live-example name="dependency-injection-in-action">live code</live-example> and confirm that the three `HeroBioComponent` instances have their own cached hero data.
|
||||
Find this example in <live-example name="dependency-injection-in-action">live code</live-example>
|
||||
and confirm that the three `HeroBioComponent` instances have their own cached hero data.
|
||||
|
||||
到<live-example name="dependency-injection-in-action">在线例子</live-example>中找到这个例子，确认三个`HeroBioComponent`实例拥有自己独立的英雄数据缓存。
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/dependency-injection-in-action/hero-bios.png" alt="Bios">
|
||||
|
||||
</figure>
|
||||
|
||||
{@a optional}
|
||||
|
|
@ -435,9 +434,7 @@ It looks like this, with the hero's telephone number from `HeroContactComponent`
|
|||
从`HeroContactComponent`获得的英雄电话号码，被投影到上面的英雄描述里，就像这样：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/dependency-injection-in-action/hero-bio-and-content.png" alt="bio and contact">
|
||||
|
||||
</figure>
|
||||
|
||||
Here's the `HeroContactComponent` which demonstrates the qualifying decorators:
|
||||
|
|
@ -480,9 +477,7 @@ Here's the `HeroBiosAndContactsComponent` in action.
|
|||
下面是`HeroBiosAndContactsComponent`的执行结果：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/dependency-injection-in-action/hero-bios-and-contacts.png" alt="Bios with contact into">
|
||||
|
||||
</figure>
|
||||
|
||||
If you comment out the `@Host()` decorator, Angular now walks up the injector ancestor tree
|
||||
|
|
@ -492,9 +487,7 @@ with the gratuitous "!!!", indicating that the logger was found.
|
|||
如果注释掉`@Host()`装饰器，Angular就会沿着注入器树往上走，直到在`AppComponent`中找到该日志服务。日志服务的逻辑加入进来，更新了英雄的显示信息，这表明确实找到了日志服务。
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/dependency-injection-in-action/hero-bio-contact-no-host.png" alt="Without @Host">
|
||||
|
||||
</figure>
|
||||
|
||||
On the other hand, if you restore the `@Host()` decorator and comment out `@Optional`,
|
||||
|
|
@ -552,9 +545,7 @@ The following image shows the effect of mousing over the `<hero-bios-and-contact
|
|||
下图显示了鼠标移到`<hero-bios-and-contacts>`标签的效果：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/dependency-injection-in-action/highlight.png" alt="Highlighted bios">
|
||||
|
||||
</figure>
|
||||
|
||||
{@a providers}
|
||||
|
|
@ -650,9 +641,7 @@ It's visually simple: a few properties and the logs produced by a logger.
|
|||
它看起来很简单：一些属性和一个日志输出。
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/dependency-injection-in-action/hero-of-month.png" alt="Hero of the month">
|
||||
|
||||
</figure>
|
||||
|
||||
The code behind it gives you plenty to think about.
|
||||
|
|
@ -831,9 +820,7 @@ The `HeroOfTheMonthComponent` constructor's `logger` parameter is typed as `Mini
|
|||
`HeroOfTheMonthComponent`构造函数的`logger`参数是一个`MinimalLogger`类型，支持TypeScript的编辑器里，只能看到它的两个成员`logs`和`logInfo`：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/dependency-injection-in-action/minimal-logger-intellisense.png" alt="MinimalLogger restricted API">
|
||||
|
||||
</figure>
|
||||
|
||||
Behind the scenes, Angular actually sets the `logger` parameter to the full service registered under the `LoggingService` token which happens to be the `DateLoggerService` that was [provided above](guide/dependency-injection-in-action#useclass).
|
||||
|
|
@ -848,9 +835,7 @@ The following image, which displays the logging date, confirms the point:
|
|||
在下面的图片中，显示了日志日期，可以确认这一点：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/dependency-injection-in-action/date-logger-entry.png" alt="DateLoggerService entry">
|
||||
|
||||
</figure>
|
||||
|
||||
</div>
|
||||
|
|
@ -1087,9 +1072,7 @@ to display a *sorted* list of heroes.
|
|||
在这个刻意生成的例子里，`SortedHeroesComponent`继承自`HeroesBaseComponent`，显示一个*被排序*的英雄列表。
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/dependency-injection-in-action/sorted-heroes.png" alt="Sorted Heroes">
|
||||
|
||||
</figure>
|
||||
|
||||
The `HeroesBaseComponent` could stand on its own.
|
||||
|
|
@ -1266,7 +1249,6 @@ you see that the `Alex` component *extends* (*inherits*) from a class named `Bas
|
|||
|
||||
`CraigComponent`例子探究了这个问题。[往回看Alex]{guide/dependency-injection-in-action#alex}，我们看到`Alex`组件*扩展*(*派生*)自一个叫`Base`的类。
|
||||
|
||||
|
||||
<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="alex-class-signature" title="parent-finder.component.ts (Alex class signature)" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
|
@ -1338,9 +1320,7 @@ Here's *Alex* and family in action:
|
|||
下面是*Alex*和其家庭的运行结果：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/dependency-injection-in-action/alex.png" alt="Alex in action">
|
||||
|
||||
</figure>
|
||||
|
||||
{@a parent-tree}
|
||||
|
|
@ -1416,9 +1396,7 @@ Here's *Alice*, *Barry* and family in action:
|
|||
这里是*Alice*，*Barry*和该家庭的操作演示：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/dependency-injection-in-action/alice.png" alt="Alice in action">
|
||||
|
||||
</figure>
|
||||
|
||||
{@a parent-token}
|
||||
|
|
@ -1567,4 +1545,3 @@ Break the circularity with `forwardRef`:
|
|||
<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="alex-providers" title="parent-finder.component.ts (AlexComponent providers)" linenums="false">
|
||||
|
||||
</code-example>
|
||||
|
||||
|
|
|
|||
|
|
@ -65,16 +65,15 @@ When you can't control the dependencies, a class becomes difficult to test.
|
|||
How can you make `Car` more robust, flexible, and testable?
|
||||
|
||||
{@a ctor-injection}
|
||||
|
||||
That's super easy. Change the `Car` constructor to a version with DI:
|
||||
|
||||
<code-tabs>
|
||||
|
||||
<code-pane title="src/app/car/car.ts (excerpt with DI)" path="dependency-injection/src/app/car/car.ts" region="car-ctor">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane title="src/app/car/car.ts (excerpt without DI)" path="dependency-injection/src/app/car/car-no-di.ts" region="car-ctor">
|
||||
|
||||
</code-pane>
|
||||
|
||||
</code-tabs>
|
||||
|
|
|
|||
|
|
@ -16,22 +16,17 @@ Start by reviewing this simplified version of the _heroes_ feature
|
|||
from the [The Tour of Heroes](tutorial/).
|
||||
|
||||
<code-tabs>
|
||||
|
||||
<code-pane title="src/app/heroes/heroes.component.ts" path="dependency-injection/src/app/heroes/heroes.component.1.ts"
|
||||
region="v1">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane title="src/app/heroes/hero-list.component.ts" path="dependency-injection/src/app/heroes/hero-list.component.1.ts">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane title="src/app/heroes/hero.ts" path="dependency-injection/src/app/heroes/hero.ts">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane title="src/app/heroes/mock-heroes.ts" path="dependency-injection/src/app/heroes/mock-heroes.ts">
|
||||
|
||||
</code-pane>
|
||||
|
||||
</code-tabs>
|
||||
|
|
@ -88,6 +83,7 @@ That's a defect we can safely ignore in this guide where our focus is on
|
|||
_injecting the service_ into the `HeroList` component.
|
||||
|
||||
{@a injector-config}
|
||||
|
||||
{@a bootstrap}
|
||||
|
||||
## Register a service provider
|
||||
|
|
@ -199,7 +195,7 @@ providing the `HeroService` in the `HeroComponent` may be a good choice.
|
|||
|
||||
<div class="l-sub-section">
|
||||
|
||||
The scope and lifetime of component-provided services is a consequence of [the way Angular creates component instances](#component-child-injectors).
|
||||
The scope and lifetime of component-provided services is a consequence of [the way Angular creates component instances](#component-child-injectors).
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -222,15 +218,11 @@ Of course, the `HeroListComponent` should do something with the injected `HeroSe
|
|||
Here's the revised component, making use of the injected service, side-by-side with the previous version for comparison.
|
||||
|
||||
<code-tabs>
|
||||
|
||||
<code-pane title="hero-list.component (with DI)" path="dependency-injection/src/app/heroes/hero-list.component.2.ts">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane title="hero-list.component (without DI)" path="dependency-injection/src/app/heroes/hero-list.component.1.ts">
|
||||
|
||||
</code-pane>
|
||||
|
||||
</code-tabs>
|
||||
|
||||
Notice that the `HeroListComponent` doesn't know where the `HeroService` comes from.
|
||||
|
|
@ -329,11 +321,9 @@ Here is the revised `HeroService` that injects the `Logger`, side-by-side with t
|
|||
<code-tabs>
|
||||
|
||||
<code-pane title="src/app/heroes/hero.service (v2)" path="dependency-injection/src/app/heroes/hero.service.2.ts">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane title="src/app/heroes/hero.service (v1)" path="dependency-injection/src/app/heroes/hero.service.1.ts">
|
||||
|
||||
</code-pane>
|
||||
|
||||
</code-tabs>
|
||||
|
|
@ -734,11 +724,9 @@ Here you see the new and the old implementation side-by-side:
|
|||
<code-tabs>
|
||||
|
||||
<code-pane title="src/app/heroes/heroes.component (v3)" path="dependency-injection/src/app/heroes/heroes.component.ts">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane title="src/app/heroes/heroes.component (v2)" path="dependency-injection/src/app/heroes/heroes.component.1.ts">
|
||||
|
||||
</code-pane>
|
||||
|
||||
</code-tabs>
|
||||
|
|
@ -1063,4 +1051,3 @@ But it's best to avoid the problem altogether by defining components and service
|
|||
还是通过在独立的文件中定义组件和服务，完全避免此问题吧。
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ This page describes techniques for deploying your Angular application to a remot
|
|||
本章会描述在远程服务器上部署Angular应用的工具与技术。
|
||||
|
||||
{@a dev-deploy}
|
||||
|
||||
{@a copy-files}
|
||||
|
||||
## Simplest deployment possible
|
||||
|
|
@ -33,7 +34,7 @@ For the simplest deployment, build for development and copy the output directory
|
|||
|
||||
3. If you copy the files into a server _sub-folder_, append the build flag, `--base-href` and set the `<base href>` appropriately.<br><br>
|
||||
|
||||
如果要把文件部署到服务器上的*某个子路径*下，构建时还要添加`--base-href`（基地址）标识，并设置合适的`<base href>`。<br><br>
|
||||
如果要把文件部署到服务器上的*某个子路径*下，构建时还要添加`--base-href`（基地址）标识，并设置合适的`<base href>`。<br><br>
|
||||
|
||||
For example, if the `index.html` is on the server at `/my/app/index.html`, set the _base href_ to
|
||||
`<base href="/my/app/">` like this.
|
||||
|
|
@ -256,9 +257,7 @@ showing exactly which classes are included in the bundle.
|
|||
Here's the output for the _main_ bundle of the QuickStart.
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/cli-quickstart/quickstart-sourcemap-explorer.png" alt="quickstart sourcemap explorer">
|
||||
|
||||
</figure>
|
||||
|
||||
{@a base-tag}
|
||||
|
|
@ -524,4 +523,4 @@ Read about how to enable CORS for specific servers at
|
|||
|
||||
客户端应用对这种错误无能为力。
|
||||
服务器必须配置成可以接受来自该应用的请求。
|
||||
要了解如何对特定的服务器开启CORS，参见<a href="http://enable-cors.org/server.html" target="_blank" title="Enabling CORS server">enable-cors.org</a>。
|
||||
要了解如何对特定的服务器开启CORS，参见<a href="http://enable-cors.org/server.html" target="_blank" title="Enabling CORS server">enable-cors.org</a>。
|
||||
|
|
|
|||
|
|
@ -18,9 +18,7 @@ The final UI looks like this:
|
|||
最终的用户界面是这样的：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/displaying-data/final.png" alt="Final UI">
|
||||
|
||||
</figure>
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
|
@ -135,9 +133,7 @@ Now run the app. It should display the title and hero name:
|
|||
运行应用。它应该显示出标题和英雄名：
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/displaying-data/title-and-hero.png" alt="Title and Hero">
|
||||
|
||||
</figure>
|
||||
|
||||
The next few sections review some of the coding choices in the app.
|
||||
|
|
@ -275,9 +271,7 @@ Now the heroes appear in an unordered list.
|
|||
现在，英雄们出现在了一个无序列表中。
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/displaying-data/hero-names-list.png" alt="After ngfor">
|
||||
|
||||
</figure>
|
||||
|
||||
## Creating a class for the data
|
||||
|
|
@ -337,15 +331,15 @@ That brief syntax does a lot:
|
|||
|
||||
* Declares a constructor parameter and its type.
|
||||
|
||||
声明了一个构造函数参数及其类型。
|
||||
声明了一个构造函数参数及其类型。
|
||||
|
||||
* Declares a public property of the same name.
|
||||
|
||||
声明了一个同名的公共属性。
|
||||
声明了一个同名的公共属性。
|
||||
|
||||
* Initializes that property with the corresponding argument when creating an instance of the class.
|
||||
|
||||
当我们`new`出该类的一个实例时，把该属性初始化为相应的参数值。
|
||||
当我们`new`出该类的一个实例时，把该属性初始化为相应的参数值。
|
||||
|
||||
### Using the Hero class
|
||||
|
||||
|
|
@ -487,4 +481,3 @@ Here's the final code:
|
|||
</code-pane>
|
||||
|
||||
</code-tabs>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,9 @@ For clarity and precision, every guideline on _this_ page is illustrated with a
|
|||
followed by the page markup for that example ... as shown here.
|
||||
|
||||
```html
|
||||
|
||||
followed by the page markup for that example ... as shown here.
|
||||
|
||||
```
|
||||
|
||||
## Doc generation and tooling
|
||||
|
|
@ -123,11 +125,8 @@ All section heading text should be in "Sentence case", which means the first wor
|
|||
**Always follow the section heading with at least one blank line.**
|
||||
|
||||
<h2 class="no-toc">
|
||||
|
||||
Main section heading
|
||||
|
||||
</h2>
|
||||
|
||||
There are usually one or more main sections that may be further divided into secondary sections.
|
||||
|
||||
Begin a main section heading with the markdown `##` characters. Alternatively, you can write the equivalent `<h2>` HTML tag.
|
||||
|
|
@ -139,12 +138,11 @@ The main section heading should be followed by a blank line and then the content
|
|||
## Sections
|
||||
|
||||
A typical document is divided into sections.
|
||||
|
||||
```
|
||||
|
||||
<h3 class="no-toc">
|
||||
|
||||
Secondary section heading
|
||||
|
||||
</h3>
|
||||
|
||||
A secondary section heading is related to a main heading and _falls textually within_ the bounds of that main heading.
|
||||
|
|
@ -158,6 +156,7 @@ The secondary heading should be followed by a blank line and then the content fo
|
|||
### Secondary section heading
|
||||
|
||||
A secondary section ...
|
||||
|
||||
```
|
||||
|
||||
#### Additional section headings
|
||||
|
|
@ -171,6 +170,7 @@ Try to minimize the heading depth, preferably only two. But more headings, such
|
|||
#### Additional section headings
|
||||
|
||||
Try to minimize ...
|
||||
|
||||
```
|
||||
|
||||
## Subsections
|
||||
|
|
@ -214,9 +214,7 @@ To exclude a heading from the TOC, create the heading as an `<h2>` or `<h3>` ele
|
|||
```html
|
||||
|
||||
<h3 class="no-toc">
|
||||
|
||||
This heading is not displayed in the TOC
|
||||
|
||||
</h3>
|
||||
|
||||
```
|
||||
|
|
@ -226,9 +224,7 @@ You can turn off TOC generation for the _entire_ page by writing the title with
|
|||
```html
|
||||
|
||||
<h1 class="no-toc">
|
||||
|
||||
A guide without a TOC
|
||||
|
||||
</h1>
|
||||
|
||||
```
|
||||
|
|
@ -247,11 +243,13 @@ Look for the `SideNav` node in `navigation.json`. The `SideNav` node is an array
|
|||
Find the header for your page. For example, a guide page that describes an Angular feature is probably a child of the `Fundamentals` header.
|
||||
|
||||
```html
|
||||
|
||||
{
|
||||
"title": "Fundamentals",
|
||||
"tooltip": "The fundamentals of Angular",
|
||||
"children": [ ... ]
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
A _header_ node child can be an _item_ node or another _header_ node. If your guide page belongs under a sub-header, find that sub-header in the JSON.
|
||||
|
|
@ -259,11 +257,13 @@ A _header_ node child can be an _item_ node or another _header_ node. If your gu
|
|||
Add an _item_ node for your guide page as a child of the appropriate _header_ node. It probably looks something like this one.
|
||||
|
||||
```html
|
||||
|
||||
{
|
||||
"url": "guide/architecture",
|
||||
"title": "Architecture",
|
||||
"tooltip": "The basic building blocks of Angular applications."
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
A navigation node has the following properties:
|
||||
|
|
@ -368,6 +368,7 @@ The following _code-example_ displays the sample's `app.module.ts`.
|
|||
Here's the brief markup that produced that lengthy snippet:
|
||||
|
||||
```html
|
||||
|
||||
<code-example
|
||||
path="docs-style-guide/src/app/app.module.ts"
|
||||
title="src/app/app.module.ts">
|
||||
|
|
@ -443,6 +444,7 @@ First you surround that fragment in the source file with a named _docregion_ as
|
|||
Then you reference that _docregion_ in the `region` attribute of the `<code-example>` like this
|
||||
|
||||
```html
|
||||
|
||||
<code-example
|
||||
path="docs-style-guide/src/app/app.module.ts"
|
||||
region="class">
|
||||
|
|
@ -472,6 +474,7 @@ Here's the markup for an "avoid" example in the
|
|||
[_Angular Style Guide_](guide/styleguide#style-05-03 "Style 05-03: components as elements").
|
||||
|
||||
```html
|
||||
|
||||
<code-example
|
||||
path="styleguide/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts"
|
||||
region="example"
|
||||
|
|
@ -507,33 +510,24 @@ The next example displays multiple code tabs, each with its own title.
|
|||
It demonstrates control over display of line numbers at both the `<code-tabs>` and `<code-pane>` levels.
|
||||
|
||||
<code-tabs linenums="false">
|
||||
|
||||
<code-pane
|
||||
title="app.component.html"
|
||||
path="docs-style-guide/src/app/app.component.html">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane
|
||||
title="app.component.ts"
|
||||
path="docs-style-guide/src/app/app.component.ts"
|
||||
linenums="true">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane
|
||||
title="app.component.css (heroes)"
|
||||
path="docs-style-guide/src/app/app.component.css"
|
||||
region="heroes">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane
|
||||
title="package.json (scripts)"
|
||||
path="docs-style-guide/package.1.json">
|
||||
|
||||
</code-pane>
|
||||
|
||||
</code-tabs>
|
||||
|
||||
Here's the markup for that example.
|
||||
|
|
@ -544,33 +538,24 @@ The `linenums` attribute in the second pane restores line numbering for _itself
|
|||
```html
|
||||
|
||||
<code-tabs linenums="false">
|
||||
|
||||
<code-pane
|
||||
title="app.component.html"
|
||||
path="docs-style-guide/src/app/app.component.html">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane
|
||||
title="app.component.ts"
|
||||
path="docs-style-guide/src/app/app.component.ts"
|
||||
linenums="true">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane
|
||||
title="app.component.css (heroes)"
|
||||
path="docs-style-guide/src/app/app.component.css"
|
||||
region="heroes">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane
|
||||
title="package.json (scripts)"
|
||||
path="docs-style-guide/package.1.json">
|
||||
|
||||
</code-pane>
|
||||
|
||||
</code-tabs>
|
||||
|
||||
```
|
||||
|
|
@ -590,22 +575,31 @@ The sample source code for this page, located in `context/examples/docs-style-gu
|
|||
Code snippet markup is always in the form of a comment. Here's the default _docregion_ markup for a TypeScript or JavaScript file:
|
||||
|
||||
```
|
||||
|
||||
// #docregion
|
||||
... some code ...
|
||||
// #enddocregion
|
||||
|
||||
```
|
||||
|
||||
Different file types have different comment syntax so adjust accordingly.
|
||||
|
||||
```html
|
||||
|
||||
<!-- #docregion -->
|
||||
|
||||
... some HTML ...
|
||||
|
||||
<!-- #enddocregion -->
|
||||
|
||||
```
|
||||
|
||||
```
|
||||
|
||||
/* #docregion */
|
||||
... some CSS ...
|
||||
/* #enddocregion */
|
||||
|
||||
```
|
||||
|
||||
The doc generation process erases these comments before displaying them in the doc viewer.
|
||||
|
|
@ -633,9 +627,7 @@ The `src/main.ts` is a simple example of a file with a single _#docregion_ at th
|
|||
|
||||
<code-example
|
||||
path="docs-style-guide/src/main.ts"
|
||||
title="src/main.ts">
|
||||
|
||||
</code-example>
|
||||
title="src/main.ts"></code-example>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -645,19 +637,20 @@ You'll often display multiple snippets from different fragments within the same
|
|||
You distinguish among them by giving each fragment its own _#docregion name_ as follows.
|
||||
|
||||
```
|
||||
|
||||
// #docregion region-name
|
||||
... some code ...
|
||||
// #enddocregion region-name
|
||||
|
||||
```
|
||||
|
||||
Remember to refer to this region by name in the `region` attribute of the `<code-example>` or `<code-pane>` as you did in an example above like this:
|
||||
|
||||
```html
|
||||
|
||||
<code-example
|
||||
path="docs-style-guide/src/app/app.module.ts"
|
||||
region="class">
|
||||
|
||||
</code-example>
|
||||
region="class"></code-example>
|
||||
|
||||
```
|
||||
|
||||
|
|
@ -666,7 +659,9 @@ The _#docregion_ with no name is the _default region_. Do _not_ set the `region`
|
|||
#### Nested _#docregions_
|
||||
|
||||
You can nest _#docregions_ within _#docregions_
|
||||
|
||||
```
|
||||
|
||||
// #docregion
|
||||
... some code ...
|
||||
// #docregion inner-region
|
||||
|
|
@ -674,6 +669,7 @@ You can nest _#docregions_ within _#docregions_
|
|||
// #enddocregion inner-region
|
||||
... yet more code ...
|
||||
/// #enddocregion
|
||||
|
||||
```
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
|
@ -714,21 +710,16 @@ export class AppComponent {
|
|||
Here's are the two corresponding code snippets displayed side-by-side.
|
||||
|
||||
<code-tabs>
|
||||
|
||||
<code-pane
|
||||
title="app.component.ts (class)"
|
||||
path="docs-style-guide/src/app/app.component.ts"
|
||||
region="class">
|
||||
|
||||
</code-pane>
|
||||
|
||||
<code-pane
|
||||
title="app.component.ts (class-skeleton)"
|
||||
path="docs-style-guide/src/app/app.component.ts"
|
||||
region="class-skeleton">
|
||||
|
||||
</code-pane>
|
||||
|
||||
</code-tabs>
|
||||
|
||||
Some observations:
|
||||
|
|
@ -758,16 +749,13 @@ Here's an example that excerpts certain scripts from `package.json` into a parti
|
|||
|
||||
<code-example
|
||||
path="docs-style-guide/package.1.json"
|
||||
title="package.json (selected scripts)">
|
||||
|
||||
</code-example>
|
||||
title="package.json (selected scripts)"></code-example>
|
||||
|
||||
```html
|
||||
|
||||
<code-example
|
||||
path="docs-style-guide/package.1.json"
|
||||
title="package.json (selected scripts)">
|
||||
|
||||
</code-example>
|
||||
title="package.json (selected scripts)"></code-example>
|
||||
|
||||
```
|
||||
|
||||
|
|
@ -781,9 +769,11 @@ Such partial and intermediate files need their own names.
|
|||
Follow the doc sample naming convention. Add a number before the file extension as illustrated here:
|
||||
|
||||
```html
|
||||
|
||||
package.1.json
|
||||
app.component.1.ts
|
||||
app.component.2.ts
|
||||
|
||||
```
|
||||
|
||||
You'll find many such files among the samples in the Angular documentation.
|
||||
|
|
@ -792,9 +782,7 @@ Remember to exclude these files from stackblitz by listing them in the `stackbli
|
|||
|
||||
<code-example
|
||||
path="docs-style-guide/stackblitz.json"
|
||||
title="stackblitz.json">
|
||||
|
||||
</code-example>
|
||||
title="stackblitz.json"></code-example>
|
||||
|
||||
{@a live-examples}
|
||||
|
||||
|
|
@ -939,7 +927,9 @@ See the ["Anchors"](guide/docs-style-guide#anchors "Style Guide - Anchors") sect
|
|||
When navigating within the page, you can omit the page URL when specifying the link that [scrolls up](#anchors "Anchors") to the beginning of this section.
|
||||
|
||||
```html
|
||||
|
||||
... the link that [scrolls up](#anchors "Anchors") to ...
|
||||
|
||||
```
|
||||
|
||||
{@a ugly-anchors}
|
||||
|
|
@ -951,7 +941,9 @@ It is often a good idea to *lock-in* a good anchor name.
|
|||
Sometimes the section header text makes for an unattractive anchor. [This one](#ugly-long-section-header-anchors) is pretty bad.
|
||||
|
||||
```html
|
||||
|
||||
[This one](#ugly-long-section-header-anchors) is pretty bad.
|
||||
|
||||
```
|
||||
|
||||
The greater danger is that **a future rewording of the header text would break** a link to this section.
|
||||
|
|
@ -970,7 +962,9 @@ text to which it applies, using the special `{@a name}` syntax like this.
|
|||
Now [link to that custom anchor name](#ugly-anchors) as you did before.
|
||||
|
||||
```html
|
||||
|
||||
Now [link to that custom anchor name](#ugly-anchors) as you did before.
|
||||
|
||||
```
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
|
@ -980,6 +974,7 @@ Alternatively, you can use the HTML `<a>` tag.
|
|||
If you do, be sure to set the `id` attribute - not the `name` attribute! The docs generator will not convert the `name` to the proper link URL.
|
||||
|
||||
```html
|
||||
|
||||
<a id="anchors"></a>
|
||||
|
||||
## Anchors
|
||||
|
|
@ -1011,6 +1006,7 @@ A helpful, informational alert.
|
|||
</div>
|
||||
|
||||
Here is the markup for these alerts.
|
||||
|
||||
```html
|
||||
|
||||
<div class="alert is-critical">
|
||||
|
|
@ -1042,7 +1038,11 @@ Callouts (like alerts) are meant to draw attention to important points. Use a ca
|
|||
|
||||
<div class="callout is-critical">
|
||||
|
||||
<header>A critical point</header>
|
||||
<header>
|
||||
|
||||
A critical point
|
||||
|
||||
</header>
|
||||
|
||||
**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
|
||||
|
||||
|
|
@ -1050,7 +1050,11 @@ Callouts (like alerts) are meant to draw attention to important points. Use a ca
|
|||
|
||||
<div class="callout is-important">
|
||||
|
||||
<header>An important point</header>
|
||||
<header>
|
||||
|
||||
An important point
|
||||
|
||||
</header>
|
||||
|
||||
**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
|
||||
|
||||
|
|
@ -1058,18 +1062,27 @@ Callouts (like alerts) are meant to draw attention to important points. Use a ca
|
|||
|
||||
<div class="callout is-helpful">
|
||||
|
||||
<header>A helpful point</header>
|
||||
<header>
|
||||
|
||||
A helpful point
|
||||
|
||||
</header>
|
||||
|
||||
**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
|
||||
|
||||
</div>
|
||||
|
||||
Here is the markup for the first of these callouts.
|
||||
|
||||
```html
|
||||
|
||||
<div class="callout is-critical">
|
||||
|
||||
<header>A critical point</header>
|
||||
<header>
|
||||
|
||||
A critical point
|
||||
|
||||
</header>
|
||||
|
||||
**Pitchfork hoodie semiotics**, roof party pop-up _paleo_ messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
|
||||
|
||||
|
|
@ -1242,38 +1255,65 @@ Here is the markup for this file tree.
|
|||
Use HTML tables to present tabular data.
|
||||
|
||||
<style>
|
||||
|
||||
td, th {vertical-align: top}
|
||||
|
||||
</style>
|
||||
|
||||
<table>
|
||||
|
||||
<tr>
|
||||
|
||||
<th>Framework</th>
|
||||
<th>
|
||||
|
||||
<th>Task</th>
|
||||
Framework
|
||||
|
||||
<th>Speed</th>
|
||||
</th>
|
||||
|
||||
<th>
|
||||
|
||||
Task
|
||||
|
||||
</th>
|
||||
|
||||
<th>
|
||||
|
||||
Speed
|
||||
|
||||
</th>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><code>AngularJS</code></td>
|
||||
<td>
|
||||
|
||||
<td>Routing</td>
|
||||
<code>AngularJS</code>
|
||||
|
||||
<td>Fast</td>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Routing
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Fast
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><code>Angular v2</code></td>
|
||||
<td>
|
||||
|
||||
<td>Routing</td>
|
||||
<code>Angular v2</code>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Routing
|
||||
|
||||
</td>
|
||||
|
||||
<!-- can use markdown too; remember blank lines -->
|
||||
|
||||
|
|
@ -1284,12 +1324,19 @@ Use HTML tables to present tabular data.
|
|||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><code>Angular v4</code></td>
|
||||
<td>
|
||||
|
||||
<td>Routing</td>
|
||||
<code>Angular v4</code>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Routing
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
|
|
@ -1298,7 +1345,6 @@ Use HTML tables to present tabular data.
|
|||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
Here is the markup for this table.
|
||||
|
|
@ -1306,38 +1352,65 @@ Here is the markup for this table.
|
|||
```html
|
||||
|
||||
<style>
|
||||
|
||||
td, th {vertical-align: top}
|
||||
|
||||
</style>
|
||||
|
||||
<table>
|
||||
|
||||
<tr>
|
||||
|
||||
<th>Framework</th>
|
||||
<th>
|
||||
|
||||
<th>Task</th>
|
||||
Framework
|
||||
|
||||
<th>Speed</th>
|
||||
</th>
|
||||
|
||||
<th>
|
||||
|
||||
Task
|
||||
|
||||
</th>
|
||||
|
||||
<th>
|
||||
|
||||
Speed
|
||||
|
||||
</th>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><code>AngularJS</code></td>
|
||||
<td>
|
||||
|
||||
<td>Routing</td>
|
||||
<code>AngularJS</code>
|
||||
|
||||
<td>Fast</td>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Routing
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Fast
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><code>Angular v2</code></td>
|
||||
<td>
|
||||
|
||||
<td>Routing</td>
|
||||
<code>Angular v2</code>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Routing
|
||||
|
||||
</td>
|
||||
|
||||
<!-- can use markdown too; remember blank lines -->
|
||||
|
||||
|
|
@ -1348,12 +1421,19 @@ Here is the markup for this table.
|
|||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
|
||||
<td><code>Angular v4</code></td>
|
||||
<td>
|
||||
|
||||
<td>Routing</td>
|
||||
<code>Angular v4</code>
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
Routing
|
||||
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
|
|
@ -1362,7 +1442,6 @@ Here is the markup for this table.
|
|||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
```
|
||||
|
|
@ -1378,8 +1457,11 @@ Angular doc generation copies these image folders to the _runtime_ location, `ge
|
|||
Set the image `src` attribute to begin in _that_ directory.
|
||||
|
||||
Here's the `src` attribute for the "flying hero" image belonging to this page.
|
||||
|
||||
```
|
||||
|
||||
src="generated/images/guide/docs-style-guide/flying-hero.png"
|
||||
|
||||
```
|
||||
|
||||
<h3 class="no-toc">Use the HTML <i><img></i> tag</h3>
|
||||
|
|
@ -1395,18 +1477,14 @@ You should nest the `<img>` tag within a `<figure>` tag, which styles the image
|
|||
Here's a conforming example
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/docs-style-guide/flying-hero.png" alt="flying hero">
|
||||
|
||||
</figure>
|
||||
|
||||
```html
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/docs-style-guide/flying-hero.png"
|
||||
alt="flying hero">
|
||||
|
||||
</figure>
|
||||
|
||||
```
|
||||
|
|
@ -1420,19 +1498,15 @@ The doc generator reads the image dimensions from the file and adds width and he
|
|||
Here's the "flying hero" at a more reasonable scale.
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/docs-style-guide/flying-hero.png" alt="flying Angular hero" width="200">
|
||||
|
||||
</figure>
|
||||
|
||||
```html
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/docs-style-guide/flying-hero.png"
|
||||
alt="flying Angular hero"
|
||||
width="200">
|
||||
|
||||
</figure>
|
||||
|
||||
```
|
||||
|
|
@ -1442,13 +1516,9 @@ Wide images can be a problem. Most browsers try to rescale the image but wide im
|
|||
**Do not set a width greater than 700px**. If you wish to display a larger image, provide a link to the actual image that the user can click on to see the full size image separately as in this example of `source-map-explorer` output from the "Ahead-of-time Compilation" guide:
|
||||
|
||||
<a href="generated/images/guide/docs-style-guide/toh-pt6-bundle.png" title="Click to view larger image">
|
||||
|
||||
<figure>
|
||||
|
||||
<img src="generated/images/guide/docs-style-guide/toh-pt6-bundle-700w.png" alt="toh-pt6-bundle" width="300px">
|
||||
|
||||
</figure>
|
||||
|
||||
</a>
|
||||
|
||||
<h3 class="no-toc">Image compression</h3>
|
||||
|
|
@ -1474,6 +1544,7 @@ Headings and code-examples automatically clear a floating image. If you need to
|
|||
The markup for the above example is:
|
||||
|
||||
```html
|
||||
|
||||
<img src="generated/images/guide/docs-style-guide/flying-hero.png"
|
||||
alt="flying Angular hero"
|
||||
width="200"
|
||||
|
|
|
|||
Loading…
Reference in New Issue