Question

我以下列方式使用ViewChild：

@Component({
    selector: 'demo',
    template: `<input type="text" #firstnameCtrl [(ngModel)]="firstname" />`
})
export class DemoComponent {
    public firstname: string;
    @ViewChild('firstnameCtrl') firstElementCtrl: ElementRef;
}

如果有人在模板中更改了导出的变量#firstnameCtrl到#firstnameElement应用程序已损坏，但未引发编译器（也未在AOT中）。

那么有更好的方法以更节省的方式绑定ViewChild吗？

谢谢！

Answer 1

https://angular.io/api/core/ViewChild 显示了通过对象绑定子项的示例。在此处复制代码，以防链接在将来变为无效：

您可以使用ViewChild从视图DOM中获取与选择器匹配的第一个元素或指令。如果视图DOM发生更改，并且新子项与选择器匹配，则将更新该属性。

在调用ngAfterViewInit回调之前设置视图查询。

元数据属性：

selector - 用于查询的指令类型或名称。 read - 从查询的元素中读取不同的标记。

import {Component, Directive, Input, ViewChild} from '@angular/core';
@Directive({selector: 'pane'})
export class Pane {
   @Input() id: string;
}

@Component({
  selector: 'example-app',
  template: `
    <pane id="1" *ngIf="shouldShow"></pane>
    <pane id="2" *ngIf="!shouldShow"></pane>

    <button (click)="toggle()">Toggle</button>

    <div>Selected: {{selectedPane}}</div> 
  `,
})
export class ViewChildComp {
  @ViewChild(Pane)
  set pane(v: Pane) {
    setTimeout(() => { this.selectedPane = v.id; }, 0);
  }
  selectedPane: string = '';
  shouldShow = true;
  toggle() { this.shouldShow = !this.shouldShow; }
}

ViewChild绑定与编译器检查

1 个答案: