将数据从父组件传递到要添加到子组件提供程序数组的服务

Question

我有一个子组件，我必须在其构造函数中注入服务。该服务将仅用于此子组件，因此我想将此服务添加到此子组件中的providers数组中。该服务应该基于从父组件传递的值创建？我想在服务的构造函数中只有一个基于传入值的服务实例。然后，我将使用此服务的实例来调用服务中可用的方法。

有人可以帮助一个例子吗？我应该如何解决这个问题？我对角度很陌生。

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()装饰使用它。你的服务被注入你的孩子，然后它可以使用/操纵你的孩子组件的属性。