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)returns正确值：

TimeDeltaDirective 对象 {delta: undefined, myDate: "2016-09-20 00:00:00"}

第二个returns：未定义

但是为什么呢？在输出包含 myDate 的整个对象之前一微秒，但在访问 this.myDate 时它 returns 未定义。

请帮助我。谢谢

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

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

Angular 2 problems with directive input / output

angular-directive

angular