Wie @Input EventEmitter von den Eltern in Angular 2

Question

Hallo, ich habe ein Kind Komponente mit der folgenden @input anrufen? Ich habe folgendes in der übergeordneten Komponente versucht, aber es funktioniert nicht:

@Output() datePickerAction: EventEmitter<{ type: string, data: string }>; 

this.datePickerAction.next({ type: 'action', data: 'toggle' }); 

Answer 1

Angular legt nahe, für das die ngOnChange() Ereignis zu verwenden:

OnChanges
Angular seine ngOnChanges Methode aufruft, wenn es Änderungen erkennt um Eigenschaften der Komponente (oder Direktive) einzugeben. In diesem Beispiel wird der OnChanges-Hook überwacht. Die ngOnChanges-Methode verwendet ein Objekt, das jeden geänderten Eigenschaftsnamen einem SimpleChange-Objekt zuordnet, das die aktuellen und vorherigen Eigenschaftswerte enthält.

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#onchanges

Also in Ihrem Fall könnten Sie nur "subscribe", wie folgt aus:

export class MyComponent implements OnChanges { 

    @Input('parentSelection') private parentSelection; 

    ngOnChanges(changes: SimpleChanges) { 

     let newVal = changes['parentSelection'].currentValue; 


     console.log('parent changed value to: ' + newVal); 

     this.someFunction(); 
    } 

    // depending on your needs you could also do *ngIf toggles in the template 
    private someFunction() { 

     switch (this.parentSelection) { 

      case 'toggle': 
       this.toggle(); 
       break; 

      case 'open': 
       this.open(); 
       break; 

      case 'close': 
       this.close(); 
       break; 

      default: 
       console.log("unknown event detected: " + this.childValue); 
       break; 
     } 

    } 

} 

Answer 2

Wenn Sie untergeordnete Komponente hat:

@Input x(): number; 

Dazu werden aufgefordert, einen Wert von der übergeordneten an die untergeordnete Komponente wie folgt zu übergeben:

<my-component [x]="myVariable"></my-component> 

Dabei steht 'myVariable' für eine Variable vom Typ 'number'. In Ihrem Fall hat Ihre Eingabe den Namen 'inputEvents' und ist vom Typ 'EventEmitter<{ type: string, data: string | DateModel }>'. Also würden Sie von Ihrer Elternkomponente die Eingabe genau gleich übergeben.

<ng2-datepicker [(ngModel)]="myDate" [inputEvents]='toggleCalEvent'></ng2-datepicker> 

Wo Variable 'toggleCalEvent' vom Typ 'EventEmitter<{ type: string, data: string | DateModel }>', wie es so auf der Stammkomponente:

private toggleCalEvent: EventEmitter<{ type: string, data: string | DateModel }> = new EventEmitter(); 

Dann könnte man auf diesen EventEmitter wie jeder EventEmitter nennen:

openCal() { 
    this.toggleCalEvent.next({ type: 'action', data: 'toggle' }); 
} 

Da der Datepicker diesen 'inputEvents' abonniert hat, wird beim Triggern eines 'next' dieser ausgelöst s Ereignis im Kind. Aber es gibt immer noch ein Problem. Wenn Sie dieses Ereignis mit einem Klick auf etwas auslösen, wird es nicht funktionieren. Versuchen Sie folgendes:

<div 
    (click)='openCal()' 
    (mouseenter)='openCal()' 
    style='background-color:yellow; width:100px; height:50px;' 
></div> 
<ng2-datepicker [(ngModel)]="myDate" [inputEvents]='toggleCalEvent'></ng2-datepicker> 

Sie werden sehen, dass der Kalender auf mouseenter schaltet, aber nicht klickt. Dies liegt daran, dass der Datapicker zum Schließen gescriptet ist, wenn Sie irgendwo außerhalb des Kalenders klicken. So öffnet und schließt es sich sofort beim Klick auf das div. Um dies zu verhindern, können Sie diese fügen Sie den Klick, um zu verhindern sprudeln:

<div 
    (click)='openCal($event)' 
    (mouseenter)='openCal($event)' 
    style='background-color:yellow; width:100px; height:50px;' 
></div> 
<ng2-datepicker [(ngModel)]="myDate" [inputEvents]='toggleCalEvent'></ng2-datepicker> 

openCal(e) { 
    this.toggleCalEvent.next({ type: 'action', data: 'toggle' }); 
    e.preventDefault(); 
    e.stopImmediatePropagation(); 
} 

nun der Kalender zeigen Toggle wie erwartet.