Question

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

我在一个带有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

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

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

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

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

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

1 个答案: