Angular 为什么ContentChild是未定义的？

我有两个组件

FormComponent

和

Test1Component

Test1Component

使用

ng内容

显示

FormComponent

FormComponent.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-form',
  template:`
      <div class="panel panel-default fcs-form">
        <div class="panel-header form-header">
                {{headerTitle}}
        </div>

        <div class="panel-body form-body">
            <ng-content select="[form-body]"></ng-content>
        </div>
        <div class="panel-footer text-center form-footer">
                <button class="btn btn-primary">{{resetBtnText}}</button>
            <button class="btn btn-primary" (click)="saveForm()"> {{saveBtnText}} </button>
            <button class="btn btn-primary">{{addBtnText}}</button>
        </div>
      </div>
  `
})
export class FormComponent{
  @Input() headerTitle:string = "Header Title";
  @Input() saveBtnText:string = "Save";
  @Input() resetBtnText:string = "Reset";
  @Input() addBtnText:string = "Add";
  @Output() save:EventEmitter<any> = new EventEmitter();

  constructor(){}

  saveForm(e: any){
    this.save.emit("save");
    console.log("FormComponent save");
  }
}

import { Component, Inject, OnInit, ContentChild } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { FormComponent } from './form.component';

@Component({
  selector: 'app-test1',
  template: `
    <app-form headerTitle="my header" (save)="saveForm(complexForm.value, $event)">
        <div form-body>

            <div class="jumbotron">
                <form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">

                    <div class="form-group">
                        <label>First Name:</label>
                        <input class="form-control" type="text" placeholder="John" [formControl]="complexForm.controls['firstName']">
                    </div>

                </form>
            </div>

        </div>
    </app-form>
  `
})
export class Test1Component {
    @ContentChild(FormComponent) contentChildForm: FormComponent;

  complexForm : FormGroup;

  constructor(private fb: FormBuilder){
    this.complexForm = fb.group({
        'firstName' : "",
        'lastName': "",
        'gender' : "Female",
        'hiking' : false,
        'running' : false,
        'swimming' : false
    });
  }

  saveForm(){
    console.log(this.contentChildForm);
    debugger;
    console.log("Test1Component save");
    return true;
  }
}

从'@angular/core'导入{Component，Input，Output，EventEmitter}；
@组成部分({
选择器：“应用程序窗体”，
模板：`
{{headerTitle}}
{{resetBtnText}
{{saveBtnText}
{{addBtnText}
`
})
导出类FormComponent{
@Input（）标题：string=“标题标题”；
@Input（）saveBtnText:string=“Save”；
@Input（）resetBtnText:string=“Reset”；
@Input（）addBtnText:string=“Add”；
@Output（）save:EventEmitter，请打开控制台查看日志。
在您的情况下，我将使用
@ViewChild
，因为我在您的
Test1Component
中没有看到任何类型为
FormComponent
的可投影节点

事实上，我认为这是正确的答案。了解何时使用
@ViewChild
和
@ContentChild
：@SrAxi可以让事情在概念上清晰易懂follow@yurzui在阅读了一些文章之后，使用ViewChild引用将数据传递给孩子们，或者使用Input decorator，这是明智的做法吗，我的印象是，家长应该使用输入向孩子传递数据，孩子应该使用事件向孩子传递数据Parent@FlyingGambit我建议您阅读以下内容：。这将对您有很大帮助。顺便说一句，如果您计划将相同的数据传递给其他组件，请选择共享服务。

。干杯！