Question

我有一个angular2应用程序，显示来自其他api的图表数据。我在 bulletchart.component 文件中创建了绘图代码。现在我想将代码外包到服务中。但似乎只有一个活动的数据服务实例。

这是我要加载图表的页面内容。

<div class="col">
   <app-bulletchart [ID]="1" [apiAddress]="'http://url1'"></app-bulletchart>
</div>
<div class="col">
   <app-bulletchart [ID]="2" [apiAddress]="'http://url2'"></app-bulletchart>
</div>

app.bulletchart 的模板是：

<div class="panel test{{ID}}">
</div>

在我的 bulletchart.service 文件中，我使用以下某些方法更改了 app-bulletchart 的DOM：

initSvg() {
const identifier = '.test' + this.ID;

console.log("ident " + identifier);
this.svg = d3.select(identifier).append('svg')
  .attr('class', 'bullet')

还有更新图表的方法

drawRange() {
console.log("range " + this.ID);

// Update the range rects.
const range = this.g.selectAll('rect.range')
  .data(this.ranges);

range.enter().append('rect')

我在 bulletchart.component

中的ngOnInit中设置了 bulletchart.service 的ID属性

但是，当我现在尝试使用this.bulletchart.drawRange();时，此方法仅针对ID 1调用，不调用ID 2。

我不明白为什么，因为我认为它会做这样的事情：

创建App-Bulletchart（ID = 1） - ＆gt;创建bulletchart.service的实例（ID = 1）
创建App-Bulletchart（ID = 2） - ＆gt;创建bulletchart.service的实例（ID = 2）

修改

我将providers: [BulletchartService]添加到我的 bulletchart.component 文件中，并将其从 app.module 中删除，现在可以正常运行了。但为什么呢？！

Answer 1

您可以在组件中包含服务提供程序，以确保为每个组件实例创建服务

@Component({
  ...
  providers:[BulletchartService]
  ...

}）

示例

@Injectable() export class AppService{ Id: string; someMethod(){ console.log(this.Id); } } @Component({ selector: 'my-child', template: `<h1>Child ID {{Id}}</h1> <button (click)="invokeService()" >Invoke service</button> `, providers:[AppService] }) export class ChildComponent { @Input() Id: string; constructor(private svc: AppService){} ngOnInit(){ this.svc.Id = this.Id; } invokeService(){ this.svc.someMethod(); } } @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1> <my-child [Id]="1" ></my-child> <my-child [Id]="2" ></my-child> ` }) export class AppComponent { name = 'Angular'; } @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent, ChildComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }

选中Plunker。

希望这有助于!!

angular2外包服务代码

1 个答案: