如何调用使用transclusion添加的组件函数？

Question

角2新手在这里，我试图使母版，处理基本的活动，如重置，保存功能。主表单使用ng-content加载其内容区域。

在单击save按钮时，我希望Master在执行自己的指令集之前调用子组件save()函数。

我该怎么做？

我认为这个问题与我想要的有点相似，但是这个问题的解决方案并没有有效的Angular 2 call function of component that was inserted with transclusion (ng-content)

下面是我的代码，请你帮忙

form.component.ts

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

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent{
  @Input() headerTitle:string = "Header Title";
  @Input() saveBtnText: string = "Save";
  @Input() resetBtnText: string = "Reset";
  @Input() addBtnText: string = "Add";
  @ContentChild('transcludedContent') contentChild;

  saveForm(){
    console.log("Parent Form save");
    console.log(this.contentChild.saveForm1());
  }
}

test1.component.html

    <app-form headerTitle="my header" #transcludedContent>
        <div form-body>
            <p>
             Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, 
            </p>
        </div>
    </app-form>

test1.component.ts

import { Component, OnInit } from '@angular/core';
import { FormComponent } from '../form/form.component';

@Component({
  selector: 'app-test1',
  templateUrl: './test1.component.html',
  styleUrls: ['./test1.component.css']
})
export class Test1Component extends FormComponent {
  saveForm1(){
    console.log("Child Form save");
  }
}

我无法获得test1.component在form.component中的引用，因此我可以调用它的save()函数。实现这一目标的正确途径是什么？

编辑1:

还为将来的引用添加了form.component.html

<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">{{saveBtnText}}</button>
        <button class="btn btn-primary">{{addBtnText}}</button>
  </div>
</div>

Answer 1

我认为这正是您想要的--使用输出事件从子到父之间进行通信：

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent{
  @Input() headerTitle:string = "Header Title";
  @Input() saveBtnText: string = "Save";
  @Input() resetBtnText: string = "Reset";
  @Input() addBtnText: string = "Add";
  @Output() save:EventEmitter = new EventEmitter();

  saveForm(){
    console.log("Parent Form save");
    this.save.emit(null);
  }
}

<app-form headerTitle="my header" (save)="saveForm()">
    <div form-body>
        <p>
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, 
        </p>
    </div>
</app-form>

Answer 2

如果您想保持ContentChild方法，那么这应该是可行的。但是我建议使用@Input和@Output方法，比如Günter Zöchbauers答案。

@ContentChild('transcludedContent') contentChild: any;

saveForm(){
  if(typeof this.child.save === 'function') { //make sure that the save method exists
    this.child.save();
  }
}

I还为您更新了柱塞，以演示概念https://plnkr.co/edit/0T0BBEJm73NWxUtW9Oje?p=preview