하이라이트 지시문을 만드는 동안 EXCEPTION

Question

나는 HTML 요소 내부의 내용을 강조하는 Angular 2로 간단한 지시문을 만들려고합니다. 여기

내 코드입니다 :

main.ts

import {bootstrap} from '@angular/platform-browser-dynamic'; 
import {Component} from '@angular/core'; 
import {HighLightCmp} from "./highlight.component"; 

@Component({ 
    selector: 'app', 
    template: ` 

    <div highlight> 
     Highlight me. 
    </div> 
     `, 
    directives: [HighLightCmp] 
}) 
class AppCmp{ 

    constructor(){} 
} 

bootstrap(AppCmp); 

highlight.component.ts

import {ElementRef,Renderer,Directive,OnInit} from "@angular/core"; 

@Directive({ 
    selector: "[highlight]" 
}) 
export class HighLightCmp implements OnInit{ 

    private color: "green"; 

    constructor(private _elRef:ElementRef,private _renderer:Renderer){} 

    ngOnInit(){ 
     this._renderer.setElementStyle(this._elRef,"background-color",this.color); 
    } 
} 

그러나

을 실행하는 동안 나는 다음과 같은 예외를 얻고있다

EXCEPTION: TypeError: Cannot set property 'background-color' of undefined

나는 당신이 콘솔에서 오류 메시지를 볼 수있는 문제 here on plunker

을 생산 다시. 이견있는 사람?

미리 감사드립니다.

Answer 1

몇 가지 문제

이것은 어쩌면 당신은 오래된 예에서 이것을 발견, 얼마 전에 변경되었습니다.

this._renderer.setElementStyle(this._elRef.nativeElement, "background-color",this.color); 

변수 정의 오류

private color: "green"; 

가

private color:string = "green"; 

다른 접근되어야도있다 : 동안 때문에 Renderer 방법은 nativeElement 대신 ElementRef로 전달되고 필요한 (선호)

,210

더 좋은 방법은 @HostBinding()을 사용하는 것 대신에

@Directive({ 
    selector: "[highlight]" 
}) 
export class HighLightCmp implements OnInit{ 

    @HostBinding('style.background-color') 
    private color: "green"; 
} 

@HostBinding() 또한 [highlight]="red"처럼 외부에서 값을 전달 할 수 있도록 @Input()와 결합 될 수있다 :

@HostBinding('style.background-color') 
    @Input() 
    private color: "green"; 

유일한 단점을 이 방법의은 바인딩하려는 스타일 속성 (또는 속성 및 클래스) 이름을 개발 시간에 알 필요가 있고 Renderer 접근 방법을 사용하면 ca n은 동적 임 (예 : @Input()