在服务中注入组件的实例

Question

出于某种原因，我试图将我的组件注入到服务中，但我获得了它的一个新实例。我用这段代码重现了我的问题：

此组件将显示 h1 中的实例编号：

@Component({
    selector: 'my-component',
    template: '<h1>Instance number {{count}}</h1>'
})
export class MyComponent {
    private static i = 0;               /* <-- counts the myComponent's instances here */
    private _count: number = i++;
    get count(): number {return this._count}
}

该服务将在控制台中记录实例编号：

@Injectable()
export class MyService {
    constructor(myComponent: MyComponent) {
        console.log("Instance number " + myComponent.count);
    }
}

主要组件将在视图和服务中注入组件：

@Component({
    selector: 'app-root',
    template: '<my-component></my-component>',
})
export class AppComponent {
    constructor(service: MyService) {
    }
}

我正在使用 angular-cli，我的 app.module.ts 外观：

@NgModule({
  declarations: [
    AppComponent,
    MyComponent
  ],
  imports: [
    BrowserModule,
  ],
  providers: [MyComponent, MyService],
  bootstrap: [AppComponent]
})
export class AppModule { }

目前，我的控制台显示 Instance number 0，我的 html 显示 Instance number 1。如何获取相同的实例？

感谢阅读我

Answer 1

这行不通。如果您的应用程序有此组件的多个实例，它应该注入哪一个。

你可以做的是例如将服务注入组件并使组件将自身传递给服务

@Component({
    selector: 'my-component',
    template: '<h1>Instance number {{count}}</h1>'
})
export class MyComponent {

    constructor(service: MyService) {
      service.myComponent = this;
    }

    private static i = 0;
    private _count: number = i++;
    get count(): number {return this._count}
}

最好不要将组件传递给服务，而是使用 observables 将事件通知组件并让组件完成其余的工作。

有关详细信息，请参阅 https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Answer 2

感谢@Günter 的回答。我 post 我的新组件在这里为任何感兴趣的人提供服务订阅：

可观察服务：

@Injectable()
export class MyService implements OnDestroy {
    private _count:number = 0;
    public numberSource = new Subject<number>();
    private numberObservable: Observable<number> = this.numberSource.asObservable().share();

    public count() {this.numberSource.next(this._count++);}
    public subscribe(s: any) {return this.numberObservable.subscribe(s);}
    public ngOnDestroy() {this.numberSource.complete();}
}

订阅者组件（我可以有很多）：

@Component({
    selector: 'my-component',
    template: `
<button (click)="increment()" >Count !</button>
<div *ngFor="let n of numbers">{{n}}</div>
`
})
export class MyComponent {
    private numbers: number[] = [];
    constructor(private myService: MyService) {
        myService.subscribe((n:number) => this.numbers.push(n));
    }
    increment() {
        this.myService.count();
    }
}

我不知道我是否清楚，但这正是我要找的。谢谢！

在服务中注入组件的实例

Inject the instance of a component in a service

angular

inject