使用模板变量引用指令

在模板中使用模板变量来引用指令，这样指令就可以在模板中的任何地方进行使用了。

为了在模板中引用指令，指令就要使用exportAs属性，这将允许宿主元素通过语法#var=exportName使用模板变量来引用指令。

xxxxxxxxxx
@Directive({
  selector: '[popup]',
  exportAs:'popup'//导出的名称为popup，可以自定义
})

export class PopupDirective {
  @Input('popup') message = ''
 
  displayMessage() {
    alert(this.message)
  }

}

xxxxxxxxxx
template: `
    <!--使用模板变量popup1引用了指令popup,可以看作现在模板变量的值就是指令的实例  -->
   <p popup='提示信息' #popup1='popup'></p>
     <!-- 调用了popup指令里面的方法displayMessage -->
   <button (click)='popup1.displayMessage()'>点击看提示</button>
   `

如果指令没有定义exportAs属性，则模板变量不可以引用指令。

实时效果反馈

1.下列描述错误的是：

A 指令的元数据中加了exportAs属性，模板变量就可以引用指令了

B 使用模板变量引用完指令后，只能在模板变量所在的元素或其子元素中使用

答案

1=>B