Gibt es eine Möglichkeit, eine Angular 2-Attribut-Direktive eine Funktion zu übergeben

Question

In Angular 1 könnten Sie eine Funktion als Argument an eine Attribut-Direktive mit & übergeben. Ich weiß, dass Sie eine Funktion als Eingabe an ein Element Richtlinie passieren kann (Komponente) in Angular 2 die

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

Syntax, aber ist es eine Möglichkeit, dies nur mit einem Attribut Richtlinie zu tun? Ich kann nur eine Zeichenkette bekommen (was mir erlaubt, die Funktion außerhalb des Bereichs zu betrachten), würde es aber vorziehen, die Funktion in einem Schritt zu übergeben. So würde Ich mag Lage sein, so etwas in meiner Vorlage zu schreiben

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

und in der Richtlinie 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(); 
     }); 
    } 
} 

Statt etwas wie schreiben von mit

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

Answer 1

versuchen Sie dies:

@Output ist besser

Verwenden @OutputPlunk online demo @Output

app/custom-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/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'; 
    } 
} 

USE @InputPlunk online demo @Input()

app/custom-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/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'; 
    } 
}