角2 - 創建萬達部件用相同的服務實例

Question

調用組件：

<some-component></some-component> 
<some-component></some-component> 

組件：

@Component ({ 
    selector : 'some-component', 
}) 

export class SomeComponent implements OnInit { 
    constructor (private someService : SomeService) {} 

    ngOnInit(): void { 
     this.someService.register(); 
    } 
} 

服務：

@Injectable() 
export class SomeService{ 
    private targets: Array; 
    constructor (private http: Http) {} 

    register(){ 
    this.targets.push('x'); 
    getData(); 
    } 

    getData(){ 
     console.log(targets); 
     let params = this.targets.join(); // 'x,x' 
     return this.http.get(params); 
    } 
} 

控制檯：

['x'] 
['x','x'] 
// what I need to do to whit until the last one and make the get request. 

你好，你可以在我的代碼中看到我需要調用組件多次使用相同的注射服務，而不是重複GET請求只是讓GET請求一次所有組件

Answer 1

第一種方法

import { Input } from '@angular/core'; 


@Component ({ 
    selector : 'some-component', 
}) 

export class SomeComponent implements OnInit { 

    @Input() isLast = false; 

    constructor (private someService : SomeService) {} 

    ngOnInit(): void { 
     this.someService.register(); 
     if (this.isLast) { 
     this.someService.getData(); 
     } 
    } 
} 

刪除您服務的寄存器內this.getData()（）

然後在你

<some-component></some-component> 
<some-component></some-component> 
<some-component [isLast]='true'></some-component> 

第二條本辦法降SomeComponents模板

@Component ({ 
    selector : 'some-component', 
}) 

export class SomeComponent implements OnInit { 

    constructor (private someService : SomeService) {} 

    ngOnInit(): void { 
     this.someService.register(); 
    } 
} 

刪除裏面的this.getData()服務的register()

然後組件類模板的內你插入你的SomeComponent s，讓我們來說這個父母comp onent是AppComponent

. 
. 
. 
export class AppComponent ... { 

    constructor (private someService : SomeService) {} 

    // import AfterViewInit from angular core package 
    ngAfterViewInit(): void { 
     this.someService.getData(); 
    } 
}