web-dev-qa-db-ja.com

Angular2 JavaScriptES5コンポーネントの要素へのアクセス

編集：これまでのほとんどのコメントでTypeScriptソリューションが得られたので、ここで繰り返す必要があると感じています：JavaScriptES5の使用。

バインドされたプロパティに基づいてデータを描画するキャンバスコンポーネントを作成したいと思います。 JavaScriptを使用してAngular2でこれを行うにはどうすればよいですか？

Angular 1での私のアプローチは、ディレクティブで要素参照を取得することですが、これが現在どのように行われるべきかを知ることができません。

これはうまくいくように見えるアプローチですが、これを行った後は手を洗いたいと思います：

(function (app) {
    app.DrawingComponent = ng.core
        .Component({
            selector: 'my-drawing',
            template: '<div><canvas id="{{randomId}}"></canvas></div>'
        })
        .Class({
            constructor: function () {
                this.randomId = "canvas" + Math.random();
            },
            ngAfterViewInit: function() {
                var canvas = document.getElementById(this.randomId);
                console.log(canvas);
            }
        });
})(window.app || (window.app = {}));
javascriptangularcomponentsecmascript-5
9
Arve

TS solution 私が参照したものとES5の唯一の違いは、ViewChildの呼び出し方法です。

TSでは注釈@ViewChildを直接使用できますが、ES5ではコンポーネントでqueriesパラメーターを使用する必要があります

app.DrawingComponent = ng.core
    .Component({
        selector: 'my-drawing',
        template: '<div><canvas #myCanvas></canvas></div>',

        // Check here! This is important!
        queries : {
          myCanvas : new ng.core.ViewChild('myCanvas')
        }
    })
    .Class({
        constructor: function () {},
        ngAfterViewInit: function() {
            console.log(this.myCanvas);
        }
    });

これが plnkr の使用法を示しています。もう1つ answer があり、その使用法をもう少し理解するのに役立ちます。

9
Eric Martinez

TypeScript以外の構文が何であるかはわかりませんが、ご自身でご存知だと思います。

これは私がそれをした方法です：

export class Navigation {

    constructor(elementRef: ElementRef) {
        // elementRef.nativeElement is the actual element
    }
}
0
Thor Jacobsen