angular 组件引用语法问题

Question

<div #id><div>

上面这种是使用id变量引用这个组件，那下面这种#todoList="cdkDropList"是什么意思呢？

  <div
    cdkDropList
    #todoList="cdkDropList"
    [cdkDropListData]="todo"
    [cdkDropListConnectedTo]="[doneList]"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
  </div>

Answer 1

没错

<div #id><div>

此时id变量的值为宿主 DOM 的引用，它的类型是ElementRef。

但是有些时候，组件（指令）间相互配合时，我们仅仅得到 DOM 还是不够的，此时则可以使用 #id=someDirective 的方法使 id 变量的值为某个指令，此的它的类型将变更为SomeDirective。

同时由于指令大多都是在对宿主元素操作，所以也是可以通过调用id.element来轻松的获取到宿主 DOM 的引用的。

在官方的基础我简单改写了一下原示例，源代码 , 效果（请打开控制台查看日志打印)

测试核心代码如下：

  <div
    cdkDropList
    #todoList="cdkDropList"
    [cdkDropListData]="todo"
    [cdkDropListConnectedTo]="[doneList]"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
  </div>

  <div
    cdkDropList
    #todoList1
    [cdkDropListData]="todo"
    [cdkDropListConnectedTo]="[doneList]"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
  </div>

export class TestComponent implements AfterViewInit {

  @ViewChild('todoList')
  private todoList: any;

  @ViewChild('todoList1')
  private todoList1: any;

  ngAfterViewInit(): void {
    console.log(this.todoList);
    console.log(this.todoList1);
  }
}

希望对你有帮助。