web-dev-qa-db-ja.com

Angular 2コンポーネント-DOMにアクセス（または純粋にJSからテンプレートなしでコンポーネントを作成）

ここでAngular 2で再生しようとしています...まだアルファ版であることがわかりました。

ComponentからDOM要素にアクセスするにはどうすればよいですか？具体的には、 d などの他のライブラリを使用して、コードからカスタムDOMを生成したいと思います。コンポーネントを作成し、d3でDOMを変更するにはコンポーネントのライフサークルに何らかの方法でプラグインする必要があると思います...

私はこれを使用しています quickstart repo 。

ありがとう！

domangular
22
Anatoly

コンポーネントの代わりにディレクティブを使用してもかまわない場合は、簡単です。 TypeScriptのAngular 2.0.0-alpha.33の場合、D3を使用してElementRefを挿入することでDOMを操作できます。

@Directive({
    selector:   'scatter-plot',
    lifecycle: [LifecycleEvent.onChange],
    properties: [ 'data' ]
})
export class ScatterPlot {

    root: Selection<any>;
    data: Array<ScatterPlotDataPoint>;

    x: (number) => number;
    y: (number) => number;

    defaultSize: string;
    circles: any;

    constructor(
        @Inject(ElementRef) elementRef: ElementRef,
        @Attribute('height') height: string,
        @Attribute('default-size') defaultSize: string
    ) {
        var el:HTMLElement = elementRef.nativeElement;
        this.root = d3.select(el);

        this.defaultSize = defaultSize ? defaultSize : "5";
        this.circles = this.root
            .append('svg')
            .attr('class', 'chart')
            .style({
                'width':  '100%',
                'height': height ? height + 'px': '',
            }).
            selectAll('circle');

    }

    render(newValue) {
        if (!newValue) return;

        this.x = d3.scale.linear().domain([-10, 110]).range([0, 250]);
        this.y = d3.scale.linear().domain([-10, 110]).range([100, 0]);

        this.circles = this.circles
            .data(newValue);

        this.circles.exit().remove();

        this.circles.enter()
            .append('circle');

        this.circles
            .transition()
            .attr("r", d => d.size ? d.size: this.defaultSize)
            .style("fill", d => d.color)
            .attr('cx', d => this.x(d.x))
            .attr('cy', d => this.y(d.y));

    }

    onChange() {
        this.render(this.data);
    }
}
19
Hardbyte

ElementRefを使用する

ElementRefは、現在のDOMノードをコンポーネントに挿入します。 ElementRefサービスは、常に現在のDOMノードに対してローカルになります。

これを挿入すると、nativeElementを使用して実際のDOMノードを取得できます。

var el = elementRef.nativeElement

これを取得したら、DOMスクリプトを使用するか、jQueryのようなDOMラッパーを使用して、好きな方法で操作できます。

$(el)
  .append('<p>Some interesting Stuff')
  .addClass('my_class');

しかし、あなたがそれを助けることができるならば、これをしないでください

Angular 1と同様に、直接DOM操作の使用は推奨されていません。テンプレートを使用してほとんどすべての作業を行うことができます。時間。

DOMを直接操作すると、複雑で理解しにくく、テストしにくいコードになります。

しかし、それが最良の解決策のように思える場合もあります。たとえば、グラフライブラリのようなサードパーティの高複雑度フレームワークと統合する必要がある場合。

これが実際の例です（ES6）

var AppComponent = ng.core
  .Component({
    selector: "app",
    template:
    `
      <div>Captured element</div>
    `
  })
  .Class({
    constructor: [ng.core.ElementRef, function(elementRef) {
      var el = elementRef.nativeElement
      el;
    }]
  })
7
superluminary

注：[非推奨]

「BrowserDomAdapter」を使用できます
https://angular.io/docs/ts/latest/api/platform/browser/BrowserDomAdapter-class.html

import {BrowserDomAdapter} from 'angular2/platform/browser'

@Component({
  selector: 'dom',
  templateUrl: 'path/to/template.html',
  providers: [BrowserDomAdapter]
})
export class DomComponent {
  constructor(private _dom: BrowserDomAdapter) {
    var domIWant = this._dom.query('whatever you want to get');
  }
}

プロセス

  1. browserDomAdapterをインポートする
  2. プロバイダーの適用：[BrowserDomAdapter]
  3. constructor（）で開始します
  4. インスタンス化されたBrowserDomAdapterを使用してdomを取得する
5
taz

他のポスターが言及したように：ElementRefをディレクティブに挿入することでDOMを操作できます。ただし、実際にneedを実行するかどうかを慎重に検討してください。

D3はDOM操作ツールです。データオブジェクトをDOMノードにバインドし、データ値の変更に応じてその要素に子要素を追加または削除できます。これは、まさにAngular 2が行うことです。

もちろん、D3は他のことも行います。円グラフの角度、またはたとえば正規分布を生成できます。これにはD3を使用できます。

私はそれがあなたが探している答えではないことを知っています。私が探していた答えではありませんが、... DOM操作とデータバインディングにD3を使用する必要があるかどうかを慎重に検討してください。 Angular 2にはすでにDOM操作とデータバインディングがあります。

0
superluminary

このドキュメント（ http://victorsavkin.com/post/118372404541/the-core-concepts-of-angular-2 ）は、「デコレータスタイルのディレクティブ」に言及していますが、これについてはもう少し説明します。詳細と基本的な例はこちら（ https://angular.io/api/core/Directive ）。

0
Martin MacPherson