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

Question

I read in the Angular docs that we can use a template reference variable on a custom component and we can get access to the public methods and properties of this component.

I tried the same on an element with a directive and it does not work.

<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>

Is it possible to use a template reference variable with a directive to get access to this directive's properties?

Answer 1

Yes, you can use exportAs property of Directive metadata declartion

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

Then in your html you should access as follows

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