Внесите экземпляр компонента в службу

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) { 
    } 
} 

Я использую угловой-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} 
} 

Это лучше не передавать компоненты к услугам, но вместо того, чтобы использовать наблюдаемыми для уведомления компонентов о события и пусть компоненты делают все остальное.

Для получения дополнительной информации см https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Answer 2

Спасибо за ваш ответ @ Гюнтера. Я отправлю свой новый компонент подписки на услугу здесь для всех, кто заинтересован в:

Наблюдаемая служба:

@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();} 
} 

subcriber компонент (я могу иметь много):

@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(); 
    } 
} 

Я не знаю, если я понятен, но это именно то, что я искал. Благодаря !