angular-docs-cn/aio/content/guide/migration-dynamic-flag.md

129 lines
6.6 KiB
Markdown
Raw Normal View History

# Dynamic queries flag migration
# 动态查询标志的迁移
## What does this migration do?
## 这种迁移是做什么的?
In Angular version 8, a schematic added `static` flags to all `@ViewChild()` and `@ContentChild()` queries.
This was the first step towards changing the default behavior.
With version 9, the default value changes to `static: false` and the flag becomes optional.
在 Angular 的 8 版本中,升级原理图为所有 `@ViewChild()``@ContentChild()` 查询都添加了 `static` 标志。这是改变默认行为的第一步。在版本 9 中,默认值变成了 `static: false`,该标志变为可选的。
This schematic scans classes in the compilation and for each class, checks if the members have a `@ViewChild()` or `@ContentChild()` query with the `static` flag set to `false`.
If so, the schematic removes the flag, as it now matches the default.
该原理图扫描了编译中的类,并为每个类检查这些成员是否有 `static` 标志设置为 `false``@ViewChild()``@ContentChild()` 查询。如果是这样,该原理图会移除该标志,因为它现在是默认值了。
**Before:**
**之前:**
```ts
@ViewChild('foo', {static: false}) foo: ElementRef;
@ViewChild('bar', {static: true}) bar: ElementRef;
```
**After:**
**之后:**
```ts
@ViewChild('foo') foo: ElementRef;
// this query doesn't change because the static value is true
@ViewChild('bar', {static: true}) bar: ElementRef;
```
Note that the flag is not supported in `@ViewChildren()` or `@ContentChildren()` queries, so the schematic will not check these properties.
请注意,`@ViewChildren()``@ContentChildren()` 查询中不支持该标志,因此该原理图不会检查这些属性。
## Why is this migration necessary?
## 为何这次迁移必不可少?
This schematic performs a code cleanup to remove `static` flags that match the default, as they are no longer necessary.
Functionally, the code change should be a noop.
这个原理图执行代码清理工作来移除与默认值相匹配的 `static` 标志,因为它们不再是必需的。从功能上讲,这种代码更改应该没有影响。
Before version 9, Angular figured out the static or dynamic nature of a query automatically, based on how the template was written.
Looking at templates in this way, however, caused buggy and surprising behavior (see more about that in the [Static Query Migration Guide](guide/static-query-migration#what-does-this-flag-mean)).
As of version 9, Angular uses dynamic queries (`static: false`) by default, which simplifies queries.
Developers can still explicitly set a query to `static: true` if necessary.
在版本 9 之前Angular 会根据模板的编写方式来自动判定查询应该是静态的还是动态的。然而,以这种方式处理模板会导致错误和意外行为(请参阅[静态查询迁移指南](guide/static-query-migration#what-does-this-flag-mean)中的更多内容)。所以,从版本 9 开始Angular 默认使用动态查询( `static: false` ),简化了查询过程。开发人员仍然可以把查询显式设置为 `static: true`
<div class=" alert is-helpful">
### What is the difference between static and dynamic queries?
### 静态查询和动态查询有什么区别?
The `static` option for `@ViewChild()` and `@ContentChild()` queries determines when the query results become available.
`@ViewChild()``@ContentChild()` 查询的 `static` 选项决定了其查询结果何时可用。
With static queries (`static: true`), the query resolves once the view has been created, but before change detection runs.
The result, though, will never be updated to reflect changes to your view, such as changes to `ngIf` and `ngFor` blocks.
使用静态查询( `static: true` )时,视图刚刚被创建,还没有运行变更检测之前,此查询就会解析。但是,其结果永远不会更新,以反映对视图的更改,例如对 `ngIf``ngFor` 块的更改。
With dynamic queries (`static: false`), the query resolves after either `ngAfterViewInit()` or `ngAfterContentInit()` for `@ViewChild()` and `@ContentChild()` respectively.
The result will be updated for changes to your view, such as changes to `ngIf` and `ngFor` blocks.
而使用动态查询( `static: false` )时,此查询会分别在 `ngAfterViewInit()``ngAfterContentInit()` 之后进行解析。此结果将随着对视图的更改而更新,例如对 `ngIf``ngFor` 块的更改。
For more information, see the following entries in the
[Static Query Migration Guide](guide/static-query-migration):
Merge remote-tracking branch 'en/master' into aio # Conflicts: # aio/content/cli/index.md # aio/content/guide/accessibility.md # aio/content/guide/ajs-quick-reference.md # aio/content/guide/angular-compiler-options.md # aio/content/guide/animations.md # aio/content/guide/aot-compiler.md # aio/content/guide/architecture-components.md # aio/content/guide/architecture-modules.md # aio/content/guide/architecture-next-steps.md # aio/content/guide/architecture-services.md # aio/content/guide/attribute-directives.md # aio/content/guide/bootstrapping.md # aio/content/guide/browser-support.md # aio/content/guide/cli-builder.md # aio/content/guide/comparing-observables.md # aio/content/guide/component-styles.md # aio/content/guide/creating-libraries.md # aio/content/guide/dependency-injection-in-action.md # aio/content/guide/dependency-injection-navtree.md # aio/content/guide/dependency-injection-providers.md # aio/content/guide/dependency-injection.md # aio/content/guide/deployment.md # aio/content/guide/deprecations.md # aio/content/guide/displaying-data.md # aio/content/guide/dynamic-component-loader.md # aio/content/guide/elements.md # aio/content/guide/file-structure.md # aio/content/guide/glossary.md # aio/content/guide/http.md # aio/content/guide/i18n.md # aio/content/guide/ivy-compatibility.md # aio/content/guide/language-service.md # aio/content/guide/lifecycle-hooks.md # aio/content/guide/module-types.md # aio/content/guide/ngmodule-faq.md # aio/content/guide/ngmodule-vs-jsmodule.md # aio/content/guide/ngmodules.md # aio/content/guide/observables-in-angular.md # aio/content/guide/pipes.md # aio/content/guide/providers.md # aio/content/guide/releases.md # aio/content/guide/route-animations.md # aio/content/guide/router-tutorial.md # aio/content/guide/router.md # aio/content/guide/rx-library.md # aio/content/guide/schematics-authoring.md # aio/content/guide/schematics-for-libraries.md # aio/content/guide/service-worker-config.md # aio/content/guide/service-worker-getting-started.md # aio/content/guide/structural-directives.md # aio/content/guide/styleguide.md # aio/content/guide/template-syntax.md # aio/content/guide/template-typecheck.md # aio/content/guide/testing.md # aio/content/guide/typescript-configuration.md # aio/content/guide/upgrade-setup.md # aio/content/guide/user-input.md # aio/content/guide/using-libraries.md # aio/content/guide/web-worker.md # aio/content/guide/workspace-config.md # aio/content/marketing/docs.md # aio/content/marketing/events.html # aio/content/navigation.json # aio/content/start/index.md # aio/content/start/start-data.md # aio/content/start/start-deployment.md # aio/content/tutorial/toh-pt2.md # aio/content/tutorial/toh-pt4.md # aio/package.json # aio/src/app/app.component.ts # aio/src/app/layout/footer/footer.component.html # aio/src/app/shared/custom-icon-registry.ts # aio/src/environments/environment.stable.ts # aio/tools/stackblitz-builder/builder.js # aio/tools/transforms/angular-content-package/index.js # aio/tools/transforms/templates/api/lib/memberHelpers.html # aio/yarn.lock # integration/ng_elements/e2e/app.e2e-spec.ts # integration/ng_elements/src/app.ts # packages/common/src/pipes/date_pipe.ts # packages/core/src/metadata/directives.ts # packages/core/src/metadata/ng_module.ts # packages/core/src/render/api.ts # packages/forms/src/directives/ng_model.ts # packages/forms/src/form_builder.ts # packages/forms/src/model.ts # packages/platform-browser/src/browser.ts # packages/router/src/config.ts # packages/router/src/directives/router_link.ts # packages/router/src/directives/router_link_active.ts # packages/router/src/events.ts # packages/router/src/router.ts # packages/router/src/router_module.ts # packages/router/src/router_state.ts
2020-11-28 12:50:51 +08:00
要了解更多信息,请参阅[静态查询迁移指南](guide/static-query-migration)中的以下条目:
* [How do I choose which `static` flag value to use: `true` or `false`?](guide/static-query-migration#how-do-i-choose-which-static-flag-value-to-use-true-or-false)
2020-06-27 09:45:25 +08:00
[如何选择使用哪个 `static` 标志值: `true` 还是 `false` ](guide/static-query-migration#how-do-i-choose-which-static-flag-value-to-use-true-or-false)
* [Is there a case where I should use `{static: true}`?](guide/static-query-migration#is-there-a-case-where-i-should-use-static-true)
2020-06-27 09:45:25 +08:00
[哪些情况下我应该使用 `{static: true}` ](guide/static-query-migration#is-there-a-case-where-i-should-use-static-true)
</div>
## What does this mean for libraries?
## 这对库来说意味着什么?
In order to support applications that are still running with version 8, the safest option for libraries is to retain the `static` flag to keep the resolution timing consistent.
为了支持那些仍在运行版本 8 的应用,库中最安全的选项是保留 `static` 标志,以保持解析时序的一致性。
- *Libraries on version 9 with applications running version 8: *
*库的版本为 9应用的版本为 8*
The schematic won't run on libraries.
As long as libraries retain their `static` flags from version 8, they should work with apps on 8.
该原理图不会在库中运行。只要库从版本 8 开始就保留了 `static` 标志,就同样可以在 8 上运行。
- *Libraries on version 8 with applications running version 9: *
*应用的版本为 9库的版本为 8*
Libraries will have explicit flags defined.
The behavior with explicit flags has not changed.
库中中会定义显式的标志。只要带有显式标志,其行为就不会改变。
### What about applications using non-migrated libraries?
### 那些使用未迁移库的应用呢?
Because this is a code cleanup that is a noop, non-migrated libraries will work the same either way.
因为这只是一个什么也不做的代码清理工作,所以未迁移的库也同样可以工作。