使@ContentChild 使用指令时遇到问题

Question

我一直在尝试让 ContentChild with Directive 在 demo/example 中工作，但我将运行保留在指令中不起作用。没有错误被抛出。我在 StackBlitz 上复制了这个场景，但我遇到了同样的问题：https://stackblitz.com/edit/angular-contentchild-directive-etktcd

为什么我的子输入仍然得到 "undefined"？

这是指令：

import { Component, Directive, Input, ContentChild, OnInit, OnDestroy, forwardRef, AfterContentInit} from '@angular/core';
import { AbstractControl } from '@angular/forms';
import { FocusDirective } from '../directive/focus.directive';

@Component({
  selector: 'field-validation',
  template: `
    <ng-content></ng-content>
  `
})

export class FieldValidationComponent implements OnInit, AfterContentInit {



  @ContentChild(FocusDirective) input: FocusDirective;

  ngOnInit(): void {
    console.log("ngOnInit::input is: ", this.input);
    // this.input.focusChange.subscribe((focus) => {
    //   this.updateAttributes();
    // });
  }

  ngAfterContentInit(): void {
    console.log("ngAfterContentInit::input is: ", this.input);
  }

}

这是子组件：

import { Component, Directive, Input, ContentChild, OnInit, OnDestroy, 

forwardRef, AfterContentInit} from '@angular/core';
import { AbstractControl } from '@angular/forms';
import { FocusDirective } from '../directive/focus.directive';

@Component({
  selector: 'field-validation',
  template: `
    <ng-content></ng-content>
  `
})

export class FieldValidationComponent implements OnInit, AfterContentInit {



  @ContentChild(FocusDirective) input: FocusDirective;

  ngOnInit(): void {
    console.log("ngOnInit::input is: ", this.input);
    // this.input.focusChange.subscribe((focus) => {
    //   this.updateAttributes();
    // });
  }

  ngAfterContentInit(): void {
    console.log("ngAfterContentInit::input is: ", this.input);
  }

}

这是父应用程序中的 HTML：

<form [formGroup]="testForm">
  <field-validation>
    <input type="text" placeholder="0.00">
  </field-validation>
  <div>
  <button type="submit">FAKE SUBMIT</button>
  </div>
</form>

Answer 1

请将FocusDirectiveclass添加到AppModule的declaration属性，如下图

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { FieldValidationComponent } from './child-component/field-validation.component';
import { RxReactiveFormsModule } from '@rxweb/reactive-form-validators'
import { FocusDirective } from './directive/focus.directive';

@NgModule({
  imports:      [ BrowserModule, ReactiveFormsModule, RxReactiveFormsModule],
  declarations: [ AppComponent, HelloComponent, FieldValidationComponent, FocusDirective],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

使@ContentChild 使用指令时遇到问题

Having issues getting @ContentChild working with Directive

angular2-directives

angular7

angular8