Question

我正在阅读教程，我找到了一个代码如下所示的示例代码：

/usr/bin/xcodebuild -exportArchive \
-allowProvisioningUpdates -allowProvisioningDeviceRegistration \
...

我认为这是id =“foo”的输入。但这不是正确的语法：

<input #foo />

Answer 1

它在Angular中称为模板引用变量。它可以引用DOM元素，指令或Web组件等。根据官方文档 -

A template reference variable is often a reference to a DOM element within a template. It can also be a reference to an Angular component or directive or a web component.

来源：https://angular.io/guide/template-syntax#ref-vars

示例：我们可以使用@ViewChild()使用ElementRef模板变量来访问本机元素。 @ViewChild()可以实例化与给定模板引用变量对应的ElementRef。模板变量名称将作为参数在@ViewChild()中传递。

HTML：

<div>
   Name: <input type="text" #name> <br/>
   City: <input type="text" #city>  
</div>

组件代码：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
    selector: 'app-theme',
    templateUrl: './apptheme.component.html'
})
export class AppThemeComponent implements AfterViewInit {
        @ViewChild('name') 
    private elName : ElementRef;
    @ViewChild('city') 
    private elCity : ElementRef;

    ngAfterViewInit() {
       this.elName.nativeElement.style.backgroundColor = 'cyan';
       this.elName.nativeElement.style.color = 'red';      
       this.elCity.nativeElement.style.backgroundColor = 'cyan';
       this.elCity.nativeElement.style.color = 'red';          
    }
}

使用上面的#name and #city，我们可以访问本机元素样式属性。

语法的含义是什么：<element #foo =“”>

1 个答案: