如何将 angular2 组件附加到 d3 选择？

Question

我正在使用 Angular2 + d3js 来绘制图表。将鼠标移到图表上时有一个工具提示。目前我正在将“div”直接附加到“body”并在d3.select("svg").on("mouseover", function(d){...}).中移动鼠标时动态生成innerHTML

    var div = d3.select("body").append("div")   
      .attr("class", "tooltip")             
      .style("opacity", 10);

    d3.select("svg").on("mouseover", function(d) {
        div.transition()
          .duration(200)
          .style("opacity", .9);

        div.html("Tooltip Content Here")
          .style("left", (d3.event.pageX) + 10 + "px")
          .style("top", (d3.event.pageY - 28) + "px");
   });

因为我在 Angular2 中使用这个，所以我认为应该将工具提示移到另一个组件/指令中以分离逻辑。组件可能如下所示：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-tooltip',
  templateUrl: './tooltip.component.html',
  styleUrls: ['./tooltip.component.css']
})
export class TooltipComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

但是如何将创建的组件附加到 d3.select("svg") 的 mouseover 函数中呢？或者如何直接在另一个组件中使用“app-tooltip”选择器？ 谢谢！！

Answer 1

或者如何在另一个组件中使用 'app-tooltip' 选择器 直接？

您只需像往常一样将component 的选择器添加到另一个component。 <app-tooltip></app-tooltip>。不要忘记将它添加到app.module.ts 的declarations 中（或者其他component 仍然可以使用它的级别）。

例子

component1.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-component1',
    templateUrl: 'component1.component.html'
})

export class Component1Component implements OnInit {
    constructor() { }

    ngOnInit() { }
}

component1.component.html

<h1>This is component 1</h1>
<app-component2></app-component2>

component2.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-component2',
    templateUrl: 'component2.component.html'
})

export class Component2Component implements OnInit {
    constructor() { }

    ngOnInit() { }
}

component2.component.html

<h3>This is component 2</h3>

app.module.ts

...
import { AppComponent } from './app.component';
import { Component1Component, Component2Component } from './components/index';

@NgModule({
  declarations: [
    ...
    AppComponent,
    Component1Component, Component2Component
  ],
  imports: [
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<app-component1></app-component1>

结果