Angular 2 Probleme mit Direktiven-Eingang/Ausgang

Question

Ich kann Variablen Ein-/Ausgänge nicht binden. Ich weiß nicht, was ich falsch mache.

HTML

<p [timeDelta]="'2016-09-20 00:00:00'">{{delta}}</p> 

Hier ist meine Richtlinie:

import { Directive, ElementRef, Input, Output, Renderer, EventEmitter } from '@angular/core'; 

@Directive({ selector: '[timeDelta]' }) 
export class TimeDeltaDirective { 
    @Input('timeDelta') myDate: string; 
    @Output() delta: string; 

    constructor(renderer: Renderer, el: ElementRef) { 
     console.log(this); 
     console.log(this.myDate); 
     this.delta = (this.myDate); 
    } 
} 

Die erste console.log (dies) gibt richtigen Wert:

• TimeDeltaDirective Objekt {delta: undefined, myDate : "2016-09-20 00:00:00"}

Der zweite gibt zurück: undefined

Aber warum? Eine Mikrosekunde bevor es das gesamte Objekt mit myDate ausgibt, aber beim Zugriff auf this.myDate gibt es undefined zurück.

Bitte helfen Sie mir. Danke

Answer 1

@Inputs() sind noch nicht zugewiesen, wenn die constructor() ausgeführt wird.

Verwendung ngOnInit hook anstelle des Konstruktors

constructor(renderer: Renderer, el: ElementRef) { 
    console.log(this); 
    console.log(this.myDate); 
    this.delta = (this.myDate); 
    } 

constructor(renderer: Renderer, el: ElementRef) {} 

ngOnChanges(...) { 
    // inputs are updated 
} 

ngOnInit() { 
    // executes after ngOnChanges was called the first time 
    console.log(this); 
    console.log(this.myDate); 
    this.delta = (this.myDate); 
}