Angular 技术教程 – 模板引用变量与视图查询详解

简介

在Angular开发中，模板引用变量和视图查询是两个强大的功能，它们能够让你在模板中更方便地访问和操作DOM元素或组件实例。本文将详细介绍这两个功能的使用方法和一些实际案例。

模板引用变量

模板引用变量通过在模板标签上使用#符号来定义，允许你在模板的其他部分引用它。这通常用于表单元素、按钮或自定义组件等。

案例讲解：表单验证

假设你有一个需要验证的表单，你希望在提交按钮的状态上显示表单是否有效。你可以使用模板引用变量来做到这一点。

<form #myForm="ngForm">
    <div>
        <label for="name">Name: </label>
        <input id="name" name="name" required #nameCtrl="ngModel" />
        <div *ngIf="nameCtrl.invalid && nameCtrl.touched">Name is required!</div>
    </div>
    <button [disabled]="!myForm.valid">Submit</button>
</form>
        

在上述代码中，我们使用#myForm=”ngForm”定义了表单的引用变量，并通过#nameCtrl=”ngModel”定义了输入框的引用变量。然后，我们在按钮的[disabled]属性上使用了这个引用变量来判断表单是否有效。

视图查询

视图查询是Angular提供的一种功能，它允许你通过查看组件视图树中的某些节点来获取DOM元素或组件实例的引用。视图查询通过使用@ViewChildren或@ViewChild装饰器来实现。

案例讲解：动态列表操作

假设你有一个动态生成的列表，你需要对列表项进行一些操作，比如高亮选中的项。你可以使用视图查询来实现这个功能。

@Component({
    selector: 'app-list',
    template: `
        <ul>
            <li #listItem *ngFor="let item of items" (click)="selectItem(listItem)">
                {{ item }}
            </li>
        </ul>
    `
})
export class ListComponent {
    @ViewChildren('listItem') listItems!: QueryList;
    items = ['Item 1', 'Item 2', 'Item 3'];
    selectedIndex: number = -1;

    ngAfterViewInit() {
        this.listItems.changes.subscribe(() => {
            this.updateSelectedStyles();
        });
    }

    selectItem(itemElement: ElementRef) {
        this.selectedIndex = -1;
        this.listItems.forEach((item, index) => {
            if (item.nativeElement === itemElement.nativeElement) {
                this.selectedIndex = index;
            }
            item.nativeElement.style.backgroundColor = this.selectedIndex === index ? 'yellow' : '';
        });
    }

    updateSelectedStyles() {
        if (this.selectedIndex !== -1) {
            this.listItems.toArray()[this.selectedIndex].nativeElement.style.backgroundColor = 'yellow';
        }
    }
}
        

在上述代码中，我们使用@ViewChildren(‘listItem’)装饰器来获取所有带有#listItem模板引用变量的列表项。然后，我们使用ngAfterViewInit生命周期钩子来订阅listItems的变化，并在选择项时更新样式。

总结

模板引用变量和视图查询是Angular中的两个强大功能，它们能够帮助你在模板中更方便地访问和操作DOM元素或组件实例。本文介绍了这两个功能的基本使用方法和一些实际案例，希望对你有所帮助。