在Angular的模板中读取指令实例

import { Component, Directive, Input } from "@angular/core";
@Component({
  selector: "app-root",
  template: `
    <a Demo [name]="'a'" #A="Demo" (click)="show(A)"></a>
    <b #B="BComponent" (click)="show(B)"></b>
  `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "AppComponent";
  show(value) {
    console.log(value);
  }
  ngOnInit() {
    console.log("init");
  }
}
@Directive({
  selector: "[Demo]",
  exportAs: `Demo`
})
export class DemoDirective {
  @Input() name: string;
}
@Component({
  selector: "a",
  template: ` <div>这是{{ title }}</div> `,
  styleUrls: ["./app.component.css"],
  exportAs: "AComponent"
})
export class AComponent {
  title = "AComponent";
}
abstract class abstractB {
  address: string = "地址";
}
@Component({
  selector: "b",
  template: ` <div>这是{{ title }}</div> `,
  styleUrls: ["./app.component.css"],
  exportAs: `BComponent`
})
export class BComponent extends abstractB {
  title = "BComponent";
  @Input() age: number;
  constructor() {
    super();
  }
}

import { Component, Directive, Input } from "@angular/core";
@Component({
  selector: "app-root",
  // #A="Demo" 这里算是在当前节点处read指令实例
  // 其实这里有很多实例，比如ElementRef（在模板里无法使用，可以在ViewChild中的read参数中使用）
  // AComponent
  // Demo指令
  // 可以在模板里面指定读出哪个实例，然后赋值
  template: ` <a Demo [name]="'a'" #A="Demo" (click)="show(A)"></a> `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "AppComponent";
  show(value) {
    console.log(value);
  }
  ngOnInit() {
    console.log("init");
  }
}
@Directive({
  selector: "[Demo]",
  exportAs: `Demo`
})
export class DemoDirective {
  @Input() name: string;
}
@Component({
  selector: "a",
  template: ` <div>这是{{ title }}</div> `,
  styleUrls: ["./app.component.css"],
  exportAs: "AComponent"
})
export class AComponent {
  title = "AComponent";
}
abstract class abstractB {
  address: string = "地址";
}
@Component({
  selector: "b",
  template: ` <div>这是{{ title }}</div> `,
  styleUrls: ["./app.component.css"],
  exportAs: `BComponent`
})
export class BComponent extends abstractB {
  title = "BComponent";
  @Input() age: number;
  constructor() {
    super();
  }
}

import { Component, Directive, Input } from "@angular/core";
@Component({
  selector: "app-root",
  // #A="Demo" 这里算是在当前节点处read指令实例
  // 其实这里有很多实例，比如ElementRef（在模板里无法使用，可以在ViewChild中的read参数中使用）
  // AComponent
  // Demo指令
  // 可以在模板里面指定读出哪个实例，然后赋值
  template: `
    <a
      Demo
      [name]="'a'"
      [friend]="{ name: '小明', address: '地址' }"
      #A="Demo"
      #AA
      (click)="show(A, AA)"
    ></a>
  `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "AppComponent";
  show(value, value1) {
    console.log(value, value1);
  }
  ngOnInit() {
    console.log("init");
  }
}
class Friend {
  name: string;
  age: number;
  address: string;
  constructor(option) {
    this.name = "朋友" + option.name;
    this.age = option.age ? option.age : 18;
    this.address = option.address;
  }
}
@Directive({
  selector: "[Demo]",
  exportAs: `Demo`
})
export class DemoDirective {
  @Input() name: string;
}
@Component({
  selector: "a",
  template: ` <div>这是{{ title }}</div> `,
  styleUrls: ["./app.component.css"],
  exportAs: "AComponent"
})
export class AComponent {
  title = "AComponent";
  @Input() friend: Friend;
  ngOnInit() {
    this.friend = new Friend(this.friend);
  }
}
abstract class abstractB {
  address: string = "地址";
}
@Component({
  selector: "b",
  template: ` <div>这是{{ title }}</div> `,
  styleUrls: ["./app.component.css"],
  exportAs: `BComponent`
})
export class BComponent extends abstractB {
  title = "BComponent";
  @Input() age: number;
  constructor() {
    super();
  }
}

与之等价写法

@ViewChild('component', { read: ElementRef   /* 组件、指令都可以在这里指定读取哪个实例 */ }) com: ElementRef;

https://codesandbox.io/embed/quizzical-euler-qqyw9i?fontsize=14&hidenavigation=1&theme=dark
参考
https://juejin.cn/post/6956466729891561503