angular 2自定義指令OnInit

Question

我剛剛開始使用Angular 2，並遇到以下問題。

下面是一個簡單的自定義指令，它應該使字體呈綠色。但是在ngOnInit中，它不能訪問字符串「defaultColor」，console.log返回「undefined」。

任何線索爲什麼？

乾杯！

import {Directive, ElementRef, OnInit} from 'angular2/core'; 

@Directive({ 
    selector: '[myHighlight]' 
}) 

export class HighlightDirective implements OnInit{ 
    private elRef:ElementRef; 
    private defaultColor: 'green'; 

    constructor(elRef:ElementRef){ 
     this.elRef = elRef; 
    } 

    ngOnInit():any { 
     this.elRef.nativeElement.style.color = this.defaultColor; 
     console.log(this.defaultColor) 
    } 

} 

Answer 1

語法錯誤。

private defaultColor:string = 'green'; 

值使用=不:分配。 :是爲該字段定義一個類型。

Answer 2

Working Demo

boot.ts

import {Component,bind} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser'; 
import {FORM_DIRECTIVES} from 'angular2/form'; 
import {selectedColorDirective} from 'src/directive'; 
import {Directive, ElementRef, Renderer, Input,ViewChild,AfterViewInit} from 'angular2/core'; 
@Component({ 
    selector: 'my-app', 
    template: ` 
      <div mySelectedColor> (div) I'm {{color}} color </div> 
    `, 
    directives: [selectedColorDirective] 
}) 

export class AppComponent implements AfterViewInit{ 

} 

bootstrap(AppComponent, []); 

directive.ts

import {Directive, ElementRef, Renderer, Input} from 'angular2/core'; 

@Directive({ 
    selector:"[mySelectedColor]", 
}) 

    export class selectedColorDirective { 

    private defaultColor: 'green'; 
    constructor(el: ElementRef, renderer: Renderer) { 
     this.el=el; 
     //this.el.nativeElement.style.backgroundColor = this.defaultColor; 
     this.el.nativeElement.style.color = this.defaultColor; 
    } 

     ngOnInit():any { 
      this.elRef.nativeElement.style.color = this.defaultColor; 
      console.log(this.defaultColor) 
     } 
    }