Angular：带有指令的模板引用变量

Question

我在Angular文档中读到，我们可以在custom component上使用template reference variable ，并且可以访问该组件的公共方法和属性。

我在带有directive的元素上尝试了相同的操作，但它不起作用。

<table #myTable my-directive>
    <tr>
       <th>Name</th>
    </tr>
    <tr>
        <!--test value is a prop of my directive -->
        <td>Some text: {{ myTable.testValue }}</td> 
    </tr>
</table>

是否可以将template reference variable与指令一起使用以访问该指令的属性？

Answer 1

是的，您可以使用指令元数据声明的exportAs属性

@Directive({
  selector: '[my-directive]',
  exportAs: "myDirective"
})
export class MyDirective {
  name: string = "Hello World";
  constructor() { }
}

然后在您的html中，您应该按以下方式访问

<div my-directive #t=myDirective>
  {{ t.name }}
</div>