指令输入/输出的Angular 2问题

Question

我无法绑定变量输入/输出。我不知道我做错了什么。

HTML

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

这是我的指示：

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);
    }
}

第一个console.log（this）返回正确的值：

• TimeDeltaDirective对象{delta：undefined，myDate：“2016-09-20 00:00:00”}

第二个返回：undefined

但为什么？在它输出带有myDate的整个对象之前的一微秒，但是在访问this.myDate时它返回undefined。

请帮我。谢谢

Answer 1

执行@Inputs()时尚未分配constructor()。

使用ngOnInit钩子而不是构造函数

  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);
}