我应该如何在Angular 8中为@ViewChild使用新的static选项? [英] How should I use the new static option for @ViewChild in Angular 8?

问题描述

我应该如何配置新的Angular 8视图子级?

How should I configure the new Angular 8 view child?

@ViewChild('searchText', {read: ElementRef, static: false})
public searchTextInput: ElementRef;

vs

@ViewChild('searchText', {read: ElementRef, static: true})
public searchTextInput: ElementRef;

哪个更好?什么时候应该使用static:true和static:false?

Which is better? When should I use static:true vs static:false?

推荐答案

在大多数情况下，您将需要使用{static: false}.像这样设置它可以确保找到依赖于绑定分辨率的查询匹配项(例如结构指令*ngIf, etc...).

In most cases you will want to use {static: false}. Setting it like this will ensure query matches that are dependent on binding resolution (like structural directives *ngIf, etc...) will be found.

何时使用static: false的示例:

@Component({
  template: `
    <div *ngIf="showMe" #viewMe>Am I here?</div>
    <button (click)="showMe = !showMe"></button>
  ` 
})
export class ExampleComponent {
  @ViewChild('viewMe', { static: false })
  viewMe?: ElementRef<HTMLElement>; 

  showMe = false;
}

static: false将成为Angular 9中的默认后备行为.在此处和此处

The static: false is going to be the default fallback behaviour in Angular 9. Read more here and here

引入了{ static: true }选项以支持动态创建嵌入式视图.当您动态创建视图并希望访问TemplateRef时，您将无法在ngAfterViewInit中执行此操作，因为这会导致ExpressionHasChangedAfterChecked错误.将static标志设置为true将在ngOnInit中创建您的视图.

The { static: true } option was introduced to support creating embedded views on the fly. When you are creating a view dynamically and want to acces the TemplateRef, you won't be able to do so in ngAfterViewInit as it will cause a ExpressionHasChangedAfterChecked error. Setting the static flag to true will create your view in ngOnInit.

尽管如此:

在其他大多数情况下，最佳实践是使用{static: false}.

请注意，尽管{ static: false }选项将在Angular 9中成为默认选项.这意味着不再需要设置静态标志，除非您要使用static: true选项.

Be aware though that the { static: false } option will be made default in Angular 9. Which means that setting the static flag is no longer necessary, unless you want to use the static: true option.

您可以使用angular cli ng update命令自动升级当前代码库.

You can use the angular cli ng update command to automatically upgrade your current code base.

有关迁移指南以及更多有关此的信息，您可以在此处进行检查，然后此处

For a migration guide and even more information about this, you can check here and here

静态查询和动态查询有什么区别?

@ViewChild()和@ContentChild()查询的静态选项确定查询结果何时可用.

What is the difference between static and dynamic queries?

The static option for @ViewChild() and @ContentChild() queries determines when the query results become available.

对于静态查询(static:true)，查询将在创建视图后解决，但要在更改检测运行之前进行.不过，结果永远不会更新以反映对视图的更改，例如对ngIf和ngFor块的更改.

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.

对于动态查询(静态:false)，查询分别在ngAfterViewInit()或ngAfterContentInit()之后针对@ViewChild()和@ContentChild()进行解析.结果将根据您视图的更改而更新，例如对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.

这篇关于我应该如何在Angular 8中为@ViewChild使用新的static选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！