親コンポーネントから子コンポーネントプロバイダの配列に追加するサービスにデータを渡す

Question

私はそのコンストラクタにサービスを注入する必要がある子コンポーネントを持っています。サービスはこの子コンポーネントでのみ使用されるため、この子コンポーネントのプロバイダ配列にサービスを追加したいと考えています。親コンポーネントから渡された値に基づいてサービスを作成する必要がありますか？私は、サービスのコンストラクタで渡された値に基づいて、サービスのインスタンスを1つだけ持ちたいと思う。次に、このサービスのインスタンスを使用して、サービスで使用可能なメソッドを呼び出します。

例を挙げて助けてもらえますか？この問題をどのように解決すればよいですか？私は非常に角度があります。

Answer 1

私はあなたの質問を完全には理解していませんが、はい、コンポーネントのプロバイダ配列にサービスを追加できます。

@Component({ 
    templateUrl: './product-list.component.html', 
    styleUrls: ['./product-list.component.css'], 
    providers: [ 
     ProductService 
    ] 
}) 
export class ProductComponent { 
    constructor(private productService: ProductService) { 

    } 

    ngOnInit(): void { 
    this.productService.serviceData = "some value"; 
    this.productService.otherData = 7; 
    } 
} 

このサービスは、このコンポーネントとその子コンポーネントで利用できます。

私はあなたの質問のこの部分を理解していない：The service should be created based on values passed from parent component?

あなたがサービスに値を渡したいという意味ですか？あなたはサービスのプロパティでそれを行うことができます。ここで

は一例です：

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

@Injectable() 
export class ProductService{ 
    serviceData: string; 
    otherData: number; 
} 

それとも私が見たものから、非常に一般的な技術ではない方法で、経由：

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

@Injectable() 
export class ProductService{ 
    serviceData: string; 
    otherData: number; 

    initializeData(info: string, otherInfo: number): void { 
    this.serviceData= info; 
    this.otherData = otherInfo; 
    } 
} 

Answer 2

サービスを提供する必要がある場合親コンポーネントの値をインスタンス化するとすぐに、その親コン​​ポーネントのプロバイダリストにサービスを提供し、そこで正しくインスタンス化する方がよいでしょう。

この場合、親コンポーネントが作成したサービスのインスタンスを使用する以外は、独自のプロバイダのリストにある場合と同様に、子コンポーネントのコンストラクタにインポートして注入できます。

実際、依存関係注入を使用する場合、親コンポーネントのすべての子孫コンポーネントに同じサービスインスタンスが提供されます。あなたのコンポーネントで何かに依存していた

---

親コンポーネント

import { SomeService } from './somelocation' 

@Component({ 
    selector: ' ... ', 
    providers: [ SomeService ], 
    .... 

コンポーネントのコンストラクタに渡すことでサービスを注入し、そしてサービスがそれにいくつかのプロパティ（パブリックプロパティを）持っていたと言うことができます。コンポーネントのngOnInit（）メソッドで、サービスのその部分を設定できます。

constructor(private someService: SomeService) { 
    // passing the service in the constructor here makes it available to your component 
} 

ngOnInit() { 
     if (this.someComponentProperty < 100) { 
      // this compares some property in the component to 100, and if its less than that, sets the property in the service equal to the property in the component 
      this.someService.someServiceProperty = this.someValue 

      // or you could call the service's methods 

      this.someService.serviceMethod(); 

      // you'll be able to access any public property or method from the service in this component. 
     } 

    } 

---

子コンポーネントのコンストラクタで

import { SomeService } from './somelocation' 

...

constructor(private someService: SomeService) { ... 

あなたは両方のコンポーネントにサービスの同じインスタンスを取得しますが、この方法は、サービスが、それは、すぐにそれがそれらを必要として必要と設定値を取得し、あなたは不必要にする必要がないことを保証しますコンポーネント間でプロパティを共有する必要があります（つまり、親コンポーネントのプロパティにアクセスするだけで子供がサービスにそのプロパティを提供できるようにする必要はありません）。

Answer 3

私はよく理解していれば、あなたのシナリオ：

/*myparent.component.ts*/ 
import { Component } from '@angular/core'; 

@Component({ 
    selector: "parent-component", 
    template: ` 
     Parent component 
     <child-component [values]="valuesForChild"></child-component> 
    ` 
}) 
export class MyParentComponent { 

    valueForChild; 

    updateValue() { 
     // do smth with "valueForChild" property 
    } 

} 

今、子コンポーネント：

/*mychild.component.ts*/ 
import { Component, Input } from '@angular/core'; 
import { MyService } from 'path/to/service'; 

@Component({ 
    selector: "child-component", 
    template: ` 
     Child component: {{ value }} 
    `, 
    providers: [MyService] 
}) 
export class MyChildComponent { 

    @Input() value; 

    constructor(private myService: MyService) { 
     this.myService.testMethod(value); 
    } 
    updateValues() { 
     // do smth with "value" property taken from parent 
    } 

} 

そして最後のサービス：

/*myservice.ts*/ 
import { Injectable } from '@angular/core'; 

@Injectable() 
export class MyService { 
    testMethod(value) { console.log(value) } 
} 

現在、いくつかの説明：あなたは、私がバインドプロパティを使用して、親から子へ値（構文：[values]="valuesForChild"）を通過した気づき、子コンポーネントは@Input()デコレーションでそれを使用できます。あなたのサービスはあなたの子供に注入され、あなたの子コンポーネントのプロパティを使用/操作することができます。