有没有办法将角度2属性指令传递给函数

Question

在角度1中，您可以使用&将函数作为参数传递给属性指令。我知道你可以使用

<custom-component [callback]="myCallbackFuncton"> 
..etc 
</custom-component> 

语法角度2将一个函数作为输入到一个元素指令（组件），但有什么办法，只有一个属性指令来做到这一点？我只能得到一个字符串（这允许我查看范围内的函数），但宁愿一次性传递函数。 所以我想能写这样的事情在我的模板

<form custom-submit="ctrl.register"> 
...etc 
</form> 

，并在指令JS，

@Directive({ 
    selector: '[custom-submit]', 
}) 
@Inject('$element', '$attrs') 

export default class CustomSubmit { 
    constructor($element, $scope, $attrs) { 
     this.$element = $element; 

     $element[0].addEventListener('submit',() => { 
      // custom validation behaviour 
      $attrs.customSubmit(); 
     }); 
    } 
} 

而不必写类似的

$scope.ctrl[$attrs.customSubmit]() 

Answer 1

试试这个：

@Output is better

使用@OutputPlunk online demo @Output

应用程序/自定义submit.directive.ts

import { Directive, Output, HostListener, EventEmitter } from '@angular/core'; 


@Directive({ 
    selector: '[custom-submit]' 
}) 
export class CustomSubmit { 
    constructor(
    // ... 
) { } 

    @Output('custom-submit') customSubmit: EventEmitter<any> = new EventEmitter(); 

    @HostListener('submit', ['$event']) 
    onSubmit(e) { 
    e.preventDefault(); 
    console.log('call this'); 
    this.customSubmit.emit(e); 
    } 
} 

应用程序/ app.component.ts

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    template: ` 
    <form (custom-submit)="onSubmit($event)"> 
     <div *ngFor="let item of [1,2,3,4,5,6]"> 
     {{item}} 
     </div> 
     <button type="submit">Submit</button> 
     <p>Status {{ message }}</p> 
    </form> 
    ` 
}) 
export class AppComponent { 
    message: string = ''; 

    onSubmit(e) { 
    console.log(e); 
    this.message = 'submitted'; 
    } 
} 

使用@inputPlunk online demo @Input()

应用程序/自定义submit.directive.ts

import { Directive, Input, HostListener } from '@angular/core'; 

@Directive({ 
    selector: '[custom-submit]' 
}) 
export class CustomSubmit { 
    constructor(
    // ... 
) { } 

    @Input('custom-submit') customSubmit: Fn; 

    @HostListener('submit', ['$event']) 
    onSubmit(e) { 
    e.preventDefault(); 
    console.log('call this'); 
    this.customSubmit(); 
    } 
} 

应用程序/ app.component.ts

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    template: ` 
    <form [custom-submit]="onSubmit"> 
     <div *ngFor="let item of [1,2,3,4,5,6]"> 
     {{item}} 
     </div> 
     <button type="submit">Submit</button> 
     <p>Status {{ message }}</p> 
    </form> 
    ` 
}) 
export class AppComponent { 
    message: string = ''; 
    constructor() { 
    // be careful when pass method to other Component Input 
    this.onSubmit = this.onSubmit.bind(this); 
    } 
    onSubmit() { 
    console.log('submitted'); 
    this.message = 'submitted'; 
    } 
}