9

angular2のudemyコースでangular2をちりばめていますが、先生は html 要素を強調するディレクティブを書きました。

私はfallowとしてやろうとしていますが、私に_renderer.setElementStyleは例外がスローされます。

例外: TypeError: [null] で未定義のプロパティ 'background-color' を設定できません

指令:

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

@Directive({
    selector: '[highlight-directive]'
})

export class HighlightDirective implements OnInit{
    private _defaultColor= 'green';

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

    ngOnInit(): any {
        this._renderer.setElementStyle(this._elmRef, "background-color", this._defaultColor);
        //this._elmRef.nativeElement.style.backgroundColor = this._defaultColor; //this way works fine.
    }
}

ディレクティブを使用するタンプレート:

template: `
    <div highlight-directive>
        Highlight me
    </div>
    <br>
    <div highlight-directive>
        2 Highlight me 2
    </div>
`,

教師のワークスペース: ここに画像の説明を入力

誰かが私が間違っていることを見つけることができますか?

ありがとう。

4

4 に答える 4

22

@NirSchwartzによって提案されたように

beta.1 Renderer はElementRefもはや ではなく を使用するnativeElementため、背景色を追加する Renderer 行は次のようになります。

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

これらの変更はすべてCHANGELOGで確認できます。具体的には、 beta.1の変更ログを確認する必要があります(重大な変更のセクション) 。

于 2016-02-21T14:31:00.337 に答える
3

教師のワークスペースの 10 行目を見てください:
private _defaultColor:'red';//doesn't work;
private _defaultColor ='red';// 仕事;
もちろん
this._renderer.setElementStyle(this._elmRef.nativeElement, "background-color", this._defaultColor);
、16行目で式を使用します

于 2016-03-26T13:22:23.493 に答える
1 
private _defaultColor :'green';
this._renderer.setElementStyle(this._elRef.nativeElement, 'background-color', this._defaultColor);

プロパティの VALUE を実際に設定しないため、これは機能しません_defaultColor。in のコロンの後の部分は、値ではなく TypeScriptプロパティを表すことに注意してください。例（および変数の型を指定することに固執する）：TYPE

private _defaultColor: string = 'green';

これは問題なく動作します (個人的にはこの構文を使用することを好みますが、この構文を使用しないと、プロパティはデフォルトで文字列になります)。

于 2016-04-20T05:45:23.057 に答える