Question

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

有人可以帮忙举个例子吗？我该如何解决这个问题？我对角度很新。

Answer 1

我不确定我是否完全理解您的问题，但是您可以在组件的providers数组中添加服务。

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

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

3 个答案: