过程

Question

尝试在这里使用Angular 2 ......明白它仍处于alpha状态。

如何从Component访问DOM元素？具体来说，我想使用像d3这样的其他库来从代码生成自定义DOM。我想我需要创建一个组件并以某种方式插入组件生命周期来改变DOM与d3 ...任何想法从哪里开始挖掘？

谢谢！

Answer 1

如果您不介意使用Directive而不是Component，那么它很简单。对于打字稿中的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);
    }
}

Answer 2

使用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;
    }]
  })

Answer 3

注意：[已弃用]

您可以使用＆＃34; BrowserDomAdapter＆＃34;
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');
  }
}

过程

导入BrowserDomAdapter
应用提供者：[BrowserDomAdapter]
在构造函数（）
使用instanced BrowserDomAdapter获取dom

Answer 4

这个文档（http://victorsavkin.com/post/118372404541/the-core-concepts-of-angular-2）提到了装饰风格的指令＆＃39;我相信这里用更多的细节和基本的例子来描述（https://angular.io/api/core/Directive）。

Answer 5

正如其他海报所提到的：你可以通过将ElementRef注入指令来操纵DOM。但是，请仔细考虑您是否真的需要来执行此操作。

D3是一个DOM操作工具。它允许您将数据对象绑定到DOM节点，然后在该元素中添加或删除子元素以响应更改的数据值。这几乎就是Angular 2所做的。

当然，D3也会做其他事情。您可以为饼图或正态分布生成角度，例如，您可能希望使用D3。

我知道这不是你要找的答案。这不是我想要的答案，但是......仔细考虑是否需要使用D3进行DOM操作和数据绑定。 Angular 2已经有DOM操作和数据绑定。

Angular 2组件 - 访问DOM（或创建没有模板的组件，纯粹来自JS）

5 个答案:

使用ElementRef

但如果你可以帮忙的话，不要这样做

这是一个有效的例子（在ES6中）

过程