Question

Angular 2新手在这里，我正在尝试制作处理重置，保存功能等基本活动的主表单。主表单使用ng-content加载其内容区域。

单击save按钮，我希望Master Form在执行其自己的指令集之前调用子组件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.componen中引用form.component t，以便我可以调用其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();
  }
}

我还为您更新了plunker ，以展示这个概念 https://plnkr.co/edit/0T0BBEJm73NWxUtW9Oje?p=preview

如何调用使用transclusion添加的组件功能？

2 个答案: