為什么我的組件沒有通過指令顯示 ContentChild？

Question

似乎您應該使用指令來定位指令（ source ）中的內容子項。

但是為什么我的組件不能識別標有指令的組件呢？

./my.component.ts

import {
  Component,
  Directive,
  ContentChild,
  AfterContentInit
} from "@angular/core";

@Directive({
  selector: "[trigger]"
})
export class TriggerDirective {}

@Component({
  selector: "app-my-component",
  template: ` <ng-content></ng-content> `
})
export class MyComponent implements AfterContentInit {

  @ContentChild(TriggerDirective) trigger: TriggerDirective;

  ngAfterContentInit() {
    console.log("===> ", this.trigger);
    // output: '===> undefined'
  }
}

./my.module.ts

import { NgModule } from "@angular/core";
import { MyComponent, TriggerDirective } from "./my.component";

@NgModule({
  declarations: [MyComponent, TriggerDirective], // declared it here
  exports: [MyComponent]
})
export class MyModule {}

./app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <h1>Title inside app component.</h1>
    <app-my-component>
      <button #trigger>Click me</button>
    </app-my-component>
  `
})
export class AppComponent {}

./app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { MyModule } from "../my-component/my.module";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, MyModule], // imported the module here
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Answer 1

所以基於@Mike S的幫助的完整答案。

./app.component.ts

import { Component } from "@angular/core";

@Component({
selector: "app-root",
template: `
  <h1>Title inside app component.</h1>
  <app-my-component (submit)="doSomething($event)">
    <!-- 1. use the directive without '#' since that would make it a reference variable -->
      <button trigger>Click me</but
    <button trigger>Click me</button>
  </app-my-component>
`
})
export class AppComponent {}

./trigger.directive.ts

import { Directive } from "@angular/core";

@Directive({
  selector: "[trigger]"
})
export class TriggerDirective {}

./my.component.ts

import { Component, ContentChild, AfterContentInit } from "@angular/core";

import { TriggerDirective } from "./trigger.directive";

@Component({
  selector: "app-my-component",
  template: ` <ng-content></ng-content> `
})
export class MyComponent implements AfterContentInit {
  // 2. declare it as a content child
  @ContentChild(TriggerDirective) trigger: TriggerDirective;

  ngAfterContentInit() {
    console.log("===> ", this.trigger);
  }
}

./my.module.ts

3. 聲明觸發器，並將其導出以在組件所在的模塊中使用，您希望使用它。

import { NgModule } from "@angular/core";
import { MyComponent } from "./my.component";
import { TriggerDirective } from "./trigger.directive";

@NgModule({
  declarations: [MyComponent, TriggerDirective],  // <- declare
  exports: [MyComponent, TriggerDirective] // <- and export
});
export class MyModule {}

./app.module.ts

4. 最后確保整個模塊都包含在您使用它的模塊中。

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { MyModule } from "../my-component/my.module";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, MyModule], // <-
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}