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