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