Question

Angular的新手，所以我什至不确定我的措词是否正确。

我有一个模态表单模板，我想使用一些共享功能来创建它。底部主要是两个按钮：一个取消和一个运行任何功能的按钮（本质上可以是'save（）'，'next（）'等etc。）。

我知道您可以插值和绑定数据但功能正常吗？ idk。

是否可以传递一个专门用于单击处理程序的函数？

模范模板：

//modal-template.html

    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="{{someFunction()}}">Save</button>
      <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Cancel</button>
    </div>


//modal-template.ts

import { Component, Input, OnInit } from '@angular/core';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-modal-template',
  templateUrl: './modal-template.component.html',
  styleUrls: ['./modal-template.component.css']
})
export class ModalTemplateComponent implements OnInit {

  constructor(public activeModal: NgbActiveModal) { }

  ngOnInit() {
  }

}

MODAL-COMPONENT：

//custom-modal.component.html

<app-modal-template (click)="someFunction()">
  <app-custom-modal></app-custom-modal>
</app-modal-template>

我不确定是否在这里提供了所有帮助，但是如果您需要更多详细信息，请发表评论！

感谢进阶！

Answer 1

有可能！您只需要在模态模板中 @Output click = new EventEmitter（）; ，就可以了解documentation here

//modal-template.html    
<div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="someFunction()">Save</button>
      <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Cancel</button>
    </div>


@Component({
  selector: 'app-modal-template',
  templateUrl: './modal-template.component.html',
  styleUrls: ['./modal-template.component.css']
})
export class ModalTemplateComponent implements OnInit {
   @Output() click = new EventEmitter();

  constructor(public activeModal: NgbActiveModal) { }

  ngOnInit() {
  }

 someFunction() { 
       this.click.emit(); //this line, execute the function you pass it !
 }



}

如果您仍然不了解它是如何工作的，也许这个blog with help you.

角度6：是否可以将函数作为参数传递？

1 个答案: