fix: 精修翻译
This commit is contained in:
Zhicheng WANG
parent
5aa7fbfe64
commit
56a017a977
|
|
@ -146,7 +146,7 @@ JavaScript 中，每个*文件*是一个模块，文件中定义的所有对象
|
|||
Angular loads as a collection of JavaScript modules. You can think of them as library modules. Each Angular library name begins with the `@angular` prefix. Install them with the `npm` package manager and import parts of them with JavaScript `import` statements.
|
||||
|
||||
Angular 会作为一组 JavaScript 模块进行加载，你可以把它们看成库模块。每个 Angular 库的名称都带有 `@angular` 前缀。
|
||||
使用 `npm` 包管理器安装它们，并使用 JavaScript 的 `import` 语句导入其中的各个部分。
|
||||
使用 `npm` 包管理器安装 Angular 的库，并使用 JavaScript 的 `import` 语句导入其中的各个部分。
|
||||
|
||||
<br class="clear">
|
||||
|
||||
|
|
|
|||
|
|
@ -272,7 +272,7 @@ nothing to distinguish it from any component you've written before.
|
|||
|
||||
Understanding this component requires only the Angular concepts covered in previous pages.
|
||||
|
||||
只需要前面章节中学过的概念，就可以完全理解这个组件：
|
||||
只要用前面章节中学过的 Angular 概念，就可以完全理解这个组件：
|
||||
|
||||
* The code imports the Angular core library and the `Hero` model you just created.
|
||||
|
||||
|
|
@ -628,8 +628,8 @@ Defining a `name` attribute is a requirement when using `[(ngModel)]` in combina
|
|||
Each `FormControl` is registered under the name you assigned to the `name` attribute.
|
||||
Read more in the previous section, [The NgForm directive](guide/forms#ngForm).
|
||||
|
||||
在内部，Angular 创建了一些 `FormControl`，并把它们注册到 `NgForm` 指令，再将该指令附加到 `<form>` 标签。
|
||||
注册每个 `FormControl` 时，使用 `name` 属性值作为键值。[本章后面](guide/forms#ngForm)会讨论 `NgForm`。
|
||||
在内部，Angular 创建了一些 `FormControl`，并把它们注册到 Angular 附加到 `<form>` 标签上的 `NgForm` 指令。
|
||||
注册每个 `FormControl` 时，使用 `name` 属性值作为键值。欲知详情，参见前面的 [NgForm 指令](guide/forms#ngForm)。
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -1102,7 +1102,7 @@ wire the button's enable/disabled state to the form's validity without Angular's
|
|||
|
||||
For you, it was as simple as this:
|
||||
|
||||
有了 Angular，它就是这么简单：
|
||||
对你来说，它就是这么简单：
|
||||
|
||||
1. Define a template reference variable on the (enhanced) form element.
|
||||
|
||||
|
|
|
|||
|
|
@ -190,7 +190,7 @@ or your feature module as appropriate, and list them in the `@NgModule`
|
|||
`BrowserModule` is the first import at the top of the `AppModule`,
|
||||
`app.module.ts`.
|
||||
|
||||
当你使用这些 Angular 模块时，在 `AppModule`（或适当的特性模块）中导入它们，并把它们列在当前 `@NgModule` 的 `imports` 数组中。比如，在 CLI 生成的基本应用中，`BrowserModule` 会在 `app.module.ts` 中 `AppModule` 的顶部最先导入。
|
||||
当你使用这些 Angular 模块时，在 `AppModule`（或适当的特性模块）中导入它们，并把它们列在当前 `@NgModule` 的 `imports` 数组中。比如，在 [Angular CLI](cli) 生成的基本应用中，`BrowserModule` 会在 `app.module.ts` 中 `AppModule` 的顶部最先导入。
|
||||
|
||||
```typescript
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ into efficient JavaScript code during the build phase, before the browser downlo
|
|||
and runs that code.
|
||||
This is the best compilation mode for production environments, with decreased load time and increased performance compared to [just-in-time (JIT) compilation](guide/glossary#jit).
|
||||
|
||||
Angular 的预先（AOT）编译器可以在编译期间把你的 HTML 代码和 TypeScript 代码转换成高效的 JavaScript 代码，这样浏览器就可以直接下载和运行它们。
|
||||
Angular 的预先（AOT）编译器可以在编译期间把 Angular 的 HTML 代码和 TypeScript 代码转换成高效的 JavaScript 代码，这样浏览器就可以直接下载并运行它们。
|
||||
对于产品环境，这是最好的编译模式，相对于[即时 (JIT) 编译](guide/glossary#jit)而言，它能减小加载时间，并提高性能。
|
||||
|
||||
By compiling your application using the `ngc` command-line tool, you can bootstrap directly to a module factory, so you don't need to include the Angular compiler in your JavaScript bundle.
|
||||
|
|
@ -377,7 +377,7 @@ TypeScript adds support for decorators.
|
|||
Angular defines decorators that attach metadata to classes or properties
|
||||
so that it knows what those classes or properties mean and how they should work.
|
||||
|
||||
Angular 定义了一些装饰器，用来为类或属性附加元数据，以便 Angular 了解那些类或属性的含义，以及要如何处理它们。
|
||||
Angular 定义了一些装饰器，用来为类或属性附加元数据，来让自己知道那些类或属性的含义，以及该如何处理它们。
|
||||
|
||||
See [class decorator](guide/glossary#class-decorator), [class field decorator](guide/glossary#class-field-decorator).
|
||||
|
||||
|
|
@ -470,7 +470,7 @@ A special-purpose library or API; see [Domain-specific language](https://en.wiki
|
|||
|
||||
Angular extends TypeScript with domain-specific languages for a number of domains relevant to Angular apps, defined in NgModules such as [animations](guide/animations), [forms](guide/forms), and [routing and navigation](guide/router).
|
||||
|
||||
Angular 在一些相关的应用领域中用领域特定语言扩展了 TypeScript，这些 DSL 都定义在 NgModule 中，比如 [动画](guide/animations)、[表单](guide/forms)和[路由与导航](guide/router)。
|
||||
Angular 使用领域特定语言扩展了 TypeScript，用于与 Angular 应用相关的许多领域。这些 DSL 都定义在 NgModule 中，比如 [动画](guide/animations)、[表单](guide/forms)和[路由与导航](guide/router)。
|
||||
|
||||
{@a dynamic-components}
|
||||
|
||||
|
|
@ -721,7 +721,7 @@ See [ECMAScript](guide/glossary#ecma), [TypeScript](guide/glossary#typescript).
|
|||
The Angular just-in-time (JIT) compiler converts your Angular HTML and TypeScript code into
|
||||
efficient JavaScript code at run time, as part of bootstrapping.
|
||||
|
||||
在启动期间，Angular 的即时编译器（JIT)会在运行期间把你的 HTML 和 TypeScript 代码转换成高效的 JavaScript 代码。
|
||||
在启动期间，Angular 的即时编译器（JIT)会在运行期间把你的 Angular HTML 和 TypeScript 代码转换成高效的 JavaScript 代码。
|
||||
|
||||
JIT compilation is the default (as opposed to AOT compilation) when you run Angular's `ng build` and `ng serve` CLI commands, and is a good choice during development.
|
||||
JIT mode is strongly discouraged for production use
|
||||
|
|
@ -851,7 +851,7 @@ Angular 就是用一组 JavaScript 模块（也叫库）的形式发布的。每
|
|||
|
||||
Compare to [NgModule](guide/glossary#ngmodule).
|
||||
|
||||
参见 Angular [NgModule](guide/glossary#ngmodule)。
|
||||
参见 [NgModule](guide/glossary#ngmodule)。
|
||||
|
||||
{@a N}
|
||||
|
||||
|
|
@ -988,7 +988,7 @@ In Angular, a folder within a [workspace](guide/glossary#workspace) that contain
|
|||
A workspace can contain multiple projects.
|
||||
All apps in a workspace can use libraries in the same workspace.
|
||||
|
||||
在 Angular 中，是指[工作空间](guide/glossary#workspace)中的一个文件夹，它包含 Anuglar 应用或[库](guide/glossary#library)。
|
||||
在 Angular 中，是指[工作空间](guide/glossary#workspace)中的一个文件夹，它包含 Angular 应用或[库](guide/glossary#library)。
|
||||
每个工作空间中可以包含多个项目。工作空间中的每个应用都可以使用同一工作空间中的任意库。
|
||||
|
||||
{@a provider}
|
||||
|
|
@ -1007,7 +1007,7 @@ for a class that requires it.
|
|||
Angular registers its own providers with every injector, for services that Angular defines.
|
||||
You can register your own providers for services that your app needs.
|
||||
|
||||
Angular 会为其自带的服务在每个注入器中注册它自己的提供商。你也可以自己注册应用所需的自己的服务提供商。
|
||||
Angular 会为每个注入器注册一些 Angular 自己的服务。你也可以注册应用自己所需的服务提供商。
|
||||
|
||||
See also [service](guide/glossary#service), [dependency injection](guide/glossary#di).
|
||||
|
||||
|
|
|
|||
|
|
@ -280,7 +280,7 @@ If it runs out of ancestors, Angular throws an error.
|
|||
当一个组件申请获得一个依赖时，Angular 先尝试用该组件自己的注入器来满足它。
|
||||
如果该组件的注入器没有找到对应的提供商，它就把这个申请转给它父组件的注入器来处理。
|
||||
如果那个注入器也无法满足这个申请，它就继续转给它在注入器树中的父注入器。
|
||||
这个申请继续往上冒泡 —— 直到找到了一个能处理此申请的注入器或者超出了组件树中的祖先位置为止。
|
||||
这个申请继续往上冒泡 —— 直到 Angular 找到一个能处理此申请的注入器或者超出了组件树中的祖先位置为止。
|
||||
如果超出了组件树中的祖先还未找到，Angular 就会抛出一个错误。
|
||||
|
||||
If you have registered a provider for the same DI token at different levels, the first one Angular encounters is the one it uses to provide the dependency. If, for example, a provider is registered locally in the component that needs a service, Angular doesn't look for another provider of the same service.
|
||||
|
|
|
|||
|
|
@ -697,7 +697,7 @@ For more information, see the [`ng xi18n` command documentation](cli/xi18n).
|
|||
Set the parameters `i18nOutFile` and `i18nOutFormat` to trigger the extraction.
|
||||
For more information, see the [Angular Ahead-of-Time Webpack Plugin documentation](https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack).
|
||||
|
||||
你可以使用 CLI 中来自 `@ngtools/webpack` 包中的 Webpack 插件。设置其 `i18nOutFile` 和 `i18nOutFormat` 参数进行触发。
|
||||
你可以使用 CLI 中来自 `@ngtools/webpack` 包中的 Webpack 插件 `AngularCompilerPlugin`。设置其 `i18nOutFile` 和 `i18nOutFormat` 参数进行触发。
|
||||
更多信息，参见 [Angular AOT Webpack 插件文档](https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack)。
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ opening an Angular file, reads your `tsconfig.json` file, finds all the
|
|||
templates you have in your application, and then provides language
|
||||
services for any templates that you open.
|
||||
|
||||
Angular 语言服务让你能在模板内获得自动完成、错误检查、给出提示和内部导航等功能，而不用管这些模板位于外部 HTML 文件中还是内嵌在注解/装饰器的字符串中。
|
||||
Angular 语言服务会自动检测你要打开的文件（从你的 `tsconfig.json` 中读取），找出应用中所需的所有模板，然后为你打开的这些模板提供语言服务。
|
||||
Angular 语言服务让你能在 Angular 模板内获得自动完成、错误检查、给出提示和内部导航等功能，而不用管这些模板位于外部 HTML 文件中还是内嵌在注解/装饰器的字符串中。
|
||||
Angular 语言服务会自动检测你要打开的 Angular 文件（从你的 `tsconfig.json` 中读取），找出应用中所需的所有模板，然后为你打开的这些模板提供语言服务。
|
||||
|
||||
## Autocompletion
|
||||
|
||||
|
|
@ -77,7 +77,7 @@ which is accessible from the bottom icon on the left menu pane.
|
|||
You can also use the VS Quick Open (⌘+P) to search for the extension. When you've opened it,
|
||||
enter the following command:
|
||||
|
||||
Visual Studio Code 可以从商店中安装语言服务，这个功能就在左侧菜单面板最底下的那个图标。
|
||||
Visual Studio Code 可以从商店中安装 Angular 语言服务，这个功能就在左侧菜单面板最底下的那个图标。
|
||||
你也可以使用 VS 的快速打开（⌘+P）功能来查找这个扩展插件。打开它之后就输入下列命令：
|
||||
|
||||
```sh
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ as Angular creates, updates, and destroys them.
|
|||
Developers can tap into key moments in that lifecycle by implementing
|
||||
one or more of the *lifecycle hook* interfaces in the Angular `core` library.
|
||||
|
||||
指令和组件的实例有一个生命周期：新建、更新和销毁。
|
||||
指令和组件的实例有一个生命周期：当 Angular 新建、更新和销毁它们时触发。
|
||||
通过实现一个或多个 Angular `core` 库里定义的*生命周期钩子*接口，开发者可以介入该生命周期中的这些关键时刻。
|
||||
|
||||
Each interface has a single hook method whose name is the interface name prefixed with `ng`.
|
||||
|
|
@ -142,7 +142,7 @@ calls the lifecycle hook methods in the following sequence at specific moments:
|
|||
|
||||
Called during every change detection run, immediately after `ngOnChanges()` and `ngOnInit()`.
|
||||
|
||||
在每个 Angular 变更检测周期中调用，`ngOnChanges()` 和 `ngOnInit()` 之后。
|
||||
在每个变更检测周期中调用，`ngOnChanges()` 和 `ngOnInit()` 之后。
|
||||
|
||||
</td>
|
||||
|
||||
|
|
@ -159,7 +159,7 @@ calls the lifecycle hook methods in the following sequence at specific moments:
|
|||
|
||||
Respond after Angular projects external content into the component's view / the view that a directive is in.
|
||||
|
||||
当把内容投影进组件之后调用。
|
||||
没当 Angular 把外部内容投影进组件/指令的视图之后调用。
|
||||
|
||||
Called _once_ after the first `ngDoCheck()`.
|
||||
|
||||
|
|
@ -180,7 +180,7 @@ calls the lifecycle hook methods in the following sequence at specific moments:
|
|||
|
||||
Respond after Angular checks the content projected into the directive/component.
|
||||
|
||||
每次完成被投影组件内容的变更检测之后调用。
|
||||
每当 Angular 完成被投影组件内容的变更检测之后调用。
|
||||
|
||||
Called after the `ngAfterContentInit()` and every subsequent `ngDoCheck()`.
|
||||
|
||||
|
|
@ -201,7 +201,7 @@ calls the lifecycle hook methods in the following sequence at specific moments:
|
|||
|
||||
Respond after Angular initializes the component's views and child views / the view that a directive is in.
|
||||
|
||||
初始化完组件视图及其子视图之后调用。
|
||||
每当 Angular 初始化完组件视图及其子视图之后调用。
|
||||
|
||||
Called _once_ after the first `ngAfterContentChecked()`.
|
||||
|
||||
|
|
@ -222,7 +222,7 @@ calls the lifecycle hook methods in the following sequence at specific moments:
|
|||
|
||||
Respond after Angular checks the component's views and child views / the view that a directive is in.
|
||||
|
||||
每次做完组件视图和子视图的变更检测之后调用。
|
||||
每当 Angular 做完组件视图和子视图的变更检测之后调用。
|
||||
|
||||
Called after the `ngAfterViewInit` and every subsequent `ngAfterContentChecked()`.
|
||||
|
||||
|
|
@ -244,7 +244,7 @@ calls the lifecycle hook methods in the following sequence at specific moments:
|
|||
Cleanup just before Angular destroys the directive/component.
|
||||
Unsubscribe Observables and detach event handlers to avoid memory leaks.
|
||||
|
||||
当 Angular 每次销毁指令/组件之前调用并清扫。
|
||||
没当 Angular 每次销毁指令/组件之前调用并清扫。
|
||||
在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。
|
||||
|
||||
Called _just before_ Angular destroys the directive/component.
|
||||
|
|
@ -290,7 +290,7 @@ in order to benefit from strong typing and editor tooling.
|
|||
|
||||
## Other Angular lifecycle hooks
|
||||
|
||||
## 其它生命周期钩子
|
||||
## 其它 Angular 生命周期钩子
|
||||
|
||||
Other Angular sub-systems may have their own lifecycle hooks apart from these component hooks.
|
||||
|
||||
|
|
@ -687,8 +687,7 @@ They'll have been set when `ngOnInit()` runs.
|
|||
Angular calls `ngOnChanges()` before `ngOnInit()` and many times after that.
|
||||
It only calls `ngOnInit()` once.
|
||||
|
||||
`ngOnChanges()` 方法是你访问这些属性的第一次机会，Angular 会在 `ngOnInit()` 之前调用它。
|
||||
但是在那之后，Angular 还会调用 `ngOnChanges()` 很多次。而 `ngOnInit()` 只会被调用一次。
|
||||
`ngOnChanges()` 方法是你访问这些属性的第一次机会。Angular 会在 `ngOnInit()` 之前调用 `ngOnChanges()`，之后还会调用很多次。但只会调用一次 `ngOnInit()`。
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -409,8 +409,8 @@ Merging NgModule providers into the application injector
|
|||
makes it easy for a module library to enrich the entire application with new services.
|
||||
By adding the `HttpClientModule` once, every application component can make HTTP requests.
|
||||
|
||||
通过模块导入来实现可扩展性是 NgModule 体系的主要设计目标。
|
||||
把模块的提供商并入应用程序的注入器可以让库模块使用新的服务来强化应用程序变得更容易。
|
||||
通过 NgModule 导入来实现可扩展性是 NgModule 体系的主要设计目标。
|
||||
把 NgModule 的提供商并入应用程序的注入器可以让库模块使用新的服务来强化应用程序变得更容易。
|
||||
只要添加一次 `HttpClientModule`，那么应用中的每个组件就都可以发起 Http 请求了。
|
||||
|
||||
However, this might feel like an unwelcome surprise if you expect the module's services
|
||||
|
|
@ -757,7 +757,7 @@ Angular adds `@NgModule.providers` to the application root injector, unless the
|
|||
For a lazy-loaded NgModule, Angular creates a _child injector_ and adds the module's providers to the child injector.
|
||||
|
||||
Angular 会把 `@NgModule.providers` 中的提供商添加到应用的根注入器中……
|
||||
除非该模块是惰性加载的，这种情况下，它会创建一*子注入器*，并且把该模块的提供商添加到这个子注入器中。
|
||||
除非该模块是惰性加载的，这种情况下，Angular 会创建一*子注入器*，并且把该模块的提供商添加到这个子注入器中。
|
||||
|
||||
This means that an NgModule behaves differently depending on whether it's loaded during application start
|
||||
or lazy-loaded later. Neglecting that difference can lead to [adverse consequences](guide/ngmodule-faq#q-why-bad).
|
||||
|
|
@ -843,8 +843,8 @@ Angular loads a component declaratively when
|
|||
using the component's selector to locate the element in the template.
|
||||
Angular then creates the HTML representation of the component and inserts it into the DOM at the selected element. These aren't entry components.
|
||||
|
||||
大多数应用组件都是声明式加载的。
|
||||
Angular 使用该组件的选择器在模板中定位元素，然后创建表现该组件的 HTML，并把它插入 DOM 中所选元素的内部。它们不是入口组件。
|
||||
Angular 会声明式的加载组件，它使用组件的选择器在模板中定位元素。
|
||||
然后，Angular 会创建该组件的 HTML 表示，并把它插入 DOM 中所选元素的内部。它们不是入口组件。
|
||||
|
||||
The bootstrapped root `AppComponent` is an _entry component_.
|
||||
True, its selector matches an element tag in `index.html`.
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@ You then import these modules into the root module.
|
|||
|
||||
The [Angular CLI](cli) generates the following basic app module when creating a new app.
|
||||
|
||||
CLI 在创建新应用时会生成下列基本的应用模块。
|
||||
[Angular CLI](cli) 在创建新应用时会生成下列基本的应用模块。
|
||||
|
||||
<code-example path="bootstrapping/src/app/app.module.ts" region="whole-ngmodule" header="src/app/app.module.ts" linenums="false">
|
||||
</code-example>
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ how you can add them.
|
|||
The `package.json` for a new Angular workspace installs the [core-js](https://github.com/zloirock/core-js) package,
|
||||
which polyfills missing features for several popular browser.
|
||||
|
||||
默认的 `package.json` 会安装 **[core-js](https://github.com/zloirock/core-js)** 包，它会弥补很多常用浏览器缺失的特性。
|
||||
默认的 `package.json` 会为新的 Angular 工作空间安装 **[core-js](https://github.com/zloirock/core-js)** 包，它会弥补很多常用浏览器缺失的特性。
|
||||
|
||||
{@a dev-dependencies}
|
||||
|
||||
|
|
|
|||
|
|
@ -395,7 +395,7 @@ You add the hero into the `heroes` array. The reference to the array hasn't cha
|
|||
It's the same array. That's all Angular cares about. From its perspective, *same array, no change, no display update*.
|
||||
|
||||
当你往 `heroes` 数组中添加一个新的英雄时，这个数组的引用并没有改变。它还是那个数组。而引用却是 Angular 所关心的一切。
|
||||
从 Angular 的角度来看，*这是同一个数组，没有变化，也就不需要更新显示*。
|
||||
在它看来，*这是同一个数组，没有变化，也就不需要更新显示*。
|
||||
|
||||
To fix that, create an array with the new hero appended and assign that to `heroes`.
|
||||
This time Angular detects that the array reference has changed.
|
||||
|
|
@ -479,7 +479,7 @@ Angular ignores changes within (composite) objects.
|
|||
It won't call a pure pipe if you change an input month, add to an input array, or update an input object property.
|
||||
|
||||
Angular 会忽略(复合)对象*内部*的更改。
|
||||
如果你更改了输入日期(`Date`)中的月份、往一个输入数组(`Array`)中添加新值或者更新了一个输入对象(`Object`)的属性，Angular 都不会调用纯管道。
|
||||
如果你更改了输入日期(`Date`)中的月份、往一个输入数组(`Array`)中添加新值或者更新了一个输入对象(`Object`)的属性，它都不会调用纯管道。
|
||||
|
||||
This may seem restrictive but it's also fast.
|
||||
An object reference check is fast—much faster than a deep check for
|
||||
|
|
|
|||
|
|
@ -249,7 +249,7 @@ You can <a href="generated/zips/cli-quickstart/cli-quickstart.zip" target="_blan
|
|||
|
||||
**Tip:** Most Angular guides include links to download example files and run live examples in [Stackblitz](http://www.stackblitz.com), so that you can see Angular concepts and code in action.
|
||||
|
||||
**提示：** 这里的大多数章节中都包含同时下载范例文件和通过 [Stackblitz](http://www.stackblitz.com) 在线运行它的链接，这样你就能在实战中观察这些 Angular 的概念和代码。
|
||||
**提示：** 这里的大多数 Angular 章节中都包含同时下载范例文件和通过 [Stackblitz](http://www.stackblitz.com) 在线运行它的链接，这样你就能在实战中观察这些 Angular 的概念和代码。
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1925,7 +1925,7 @@ and routing configuration, including `RouterModule.forRoot`, into this routing m
|
|||
Re-export the Angular `RouterModule` by adding it to the module `exports` array.
|
||||
By re-exporting the `RouterModule` here the components declared in `AppModule` will have access to router directives such as `RouterLink` and `RouterOutlet`.
|
||||
|
||||
把`RouterModule`添加到该模块的 `exports` 数组中，以再次导出它 。
|
||||
把 Angular 的 `RouterModule`添加到该模块的 `exports` 数组中，以便再次导出它 。
|
||||
通过再次导出 `RouterModule`，当在 `AppModule` 中导入了 `AppRoutingModule` 之后，那些声明在 `AppModule` 中的组件就可以访问路由指令了，比如 `RouterLink` 和 `RouterOutlet`。
|
||||
|
||||
After these steps, the file should look like this.
|
||||
|
|
|
|||
|
|
@ -136,8 +136,8 @@ Angular sanitizes untrusted values for HTML, styles, and URLs; sanitizing resour
|
|||
possible because they contain arbitrary code. In development mode, Angular prints a console warning
|
||||
when it has to change a value during sanitization.
|
||||
|
||||
Angular 会对前三项中种不可信的值进行无害化处理。但 Angular 无法对第四种资源 URL 进行无害化，因为它们可能包含任何代码。在开发模式下，
|
||||
如果 Angular 在进行无害化处理时需要被迫改变一个值，它就会在控制台上输出一个警告。
|
||||
Angular 会对前三项中种不可信的值进行无害化处理，但不能对第四种资源 URL 进行无害化，因为它们可能包含任何代码。在开发模式下，
|
||||
如果在进行无害化处理时需要被迫改变一个值，Angular 就会在控制台上输出一个警告。
|
||||
|
||||
### Sanitization example
|
||||
|
||||
|
|
@ -310,7 +310,7 @@ Angular to allow binding into `<iframe src>`:
|
|||
|
||||
如果需要把用户输入转换为一个可信任的值，可以在控制器方法中处理。下面的模板允许用户输入一个 YouTube 视频的 ID，
|
||||
然后把相应的视频加载到 `<iframe>` 中。`<iframe src>` 是一个“资源 URL”的安全环境，因为不可信的源码可能作为文件下载到本地，被毫无防备的用户执行。
|
||||
所以要调用一个控制器方法来构造一个新的、可信任的视频 URL，然后把它绑定到 `<iframe src>`。
|
||||
所以要调用一个控制器方法来构造一个新的、可信任的视频 URL，这样 Angular 就会允许把它绑定到 `<iframe src>`。
|
||||
|
||||
<code-example path="security/src/app/bypass-security.component.html" linenums="false" header="src/app/bypass-security.component.html (iframe)" region="iframe">
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ service worker should cache and how it should update the cached files and data.
|
|||
it with the `ngsw-config` tool:
|
||||
|
||||
配置文件 `src/ngsw-config.json` 指定了 Angular Service Worker 应该缓存哪些文件和数据的 URL，以及如何更新缓存的文件和数据。
|
||||
CLI 会在 `ng build --prod` 期间处理配置文件。
|
||||
[Angular CLI](cli) 会在 `ng build --prod` 期间处理配置文件。
|
||||
如果想手动处理，你可以使用 `ngsw-config` 工具：
|
||||
|
||||
```sh
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
This document explains how to enable Angular service worker support in projects that you created with the [Angular CLI](cli). It then uses a simple example to show you a service worker in action, demonstrating loading and basic caching.
|
||||
|
||||
本文档解释了如何在 CLI 项目中启用对 Angular Service Worker 的支持。稍后它会用一个简单的范例来向你展示 Service Worker 实践，包括加载和基础的缓存功能。
|
||||
本文档解释了如何在 [Angular CLI](cli) 项目中启用对 Angular Service Worker 的支持。稍后它会用一个简单的范例来向你展示 Service Worker 实践，包括加载和基础的缓存功能。
|
||||
|
||||
#### Prerequisites
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ This guide offers tips and techniques for unit and integration testing Angular a
|
|||
The guide presents tests of a sample application created with the [Angular CLI](cli). This sample application is much like the one created in the [_Tour of Heroes_ tutorial](tutorial).
|
||||
The sample application and all tests in this guide are available for inspection and experimentation:
|
||||
|
||||
该指南中的测试面向的是一个很像[《英雄指南》教程](tutorial)的 CLI 范例应用。
|
||||
该指南中的测试面向的是一个很像[《英雄指南》教程](tutorial)的 [Angular CLI](cli) 范例应用。
|
||||
这个范例应用及其所有测试都可以在下面的链接中进行查看和试用：
|
||||
|
||||
- <live-example embedded-style>Sample app</live-example>
|
||||
|
|
|
|||
Loading…
Reference in New Issue