Angular:扩展服务和传递参数 [英] Angular: Extending Services and Passing Parameters

问题描述

我很难理解如何在Angular中扩展服务.

I'm having a hard time understanding how to extend services in Angular.

我有一个连接到Firebase并执行各种常见任务(获取，设置，更新，列表等)的服务，而没有为我的特殊组件重写它，而是尝试将其扩展.

I have a service that connects to Firebase and does all sorts of common tasks (get, set, update, list, etc.) and instead of re-writing it for my special components I tried just extending it.

我的想法是我只能传递路径的新部分，但这会引发错误:

The idea was I could pass just the new part of the path but that throws an error:

Cannot resolve all parameters for 'FirebaseService'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'FirebaseService' is decorated with Injectable.

问题出在构造函数上，我缺乏OOP头脑.我可以将其他服务或提供程序传递到我的服务中，但是除非缺少某些内容，否则无法再传递简单的字符串参数.我尝试设置属性，但我认为上下文不正确.

The issue is in the constructor and my lack of OOP brains. I can pass other services or providers into my service but I can no longer pass simple string parameters unless I'm missing something. I tried setting properties but I don't think I'm getting the context right.

我当时认为@Injectable存在问题，但不确定.

I was thinking it was an issue with the @Injectable but I'm not sure.

这是我首先尝试的简化版本:

Here's a simplified version of what I tried first:

已更新为包含插入链接":

用于传递参数的柱塞

用于传递构造函数的柱塞

@Injectable()
export class FirebaseService {
  rootPath:string = "https://mysite.firebase.com/";
  childPath:string;
  pathToUse: string;
  constructor() {
    if(this.childPath){
        this.pathToUse = this.rootPath + this.childPath;
    }else{
        this.pathToUse = this.rootPath;
    }
    console.log(this.pathToUse);
  }
}
//The in project_service.ts
@Injectable()
export class ProjectService extends FirebaseService{
    childPath:string = "projects";
    constructor(){
        super();
    }
}

我希望它附带项目"行.它没有，只是重复.

I expected it to have the "projects" line attached. It doesn't, it just repeats.

所以，然后我尝试通过构造函数:

So Then I tried passing through the constructor:

@Injectable()
export class FirebaseService {
  rootPath:string = "https://mysite.firebase.com";
  pathToUse: string;
  constructor(childPath:string) {
    if(childPath){
        this.pathToUse = this.rootPath + childPath;
    }else{
        this.pathToUse = this.rootPath;
    }
    console.log(this.pathToUse);
  }
}
//The in project_service.ts
@Injectable()
export class ProjectService extends FirebaseService{
    constructor(){
        super('projects');
    }
}

这只是炸毁一切.我有办法解决，但似乎完全是骇客.

Which just blows everything up. I have a way around it but it seems like a total hack.

将"projects"参数传递给父类的正确方法是什么?

What is the correct way to pass the "projects" parameter to the parent class?

推荐答案

因此，在CH白金汉(CH Buckingham)做了一些出色的工作之后，我已经解决了典型"的做法是不可能的.

So after some good work by CH Buckingham I've resolved that doing it the "typical" way is impossible.

Angular2只需使用注入器接管Constructor()函数即可.但是，有效的方法是创建一个备用的"init"函数，然后可以将参数传递给该函数.

Angular2 simply takes over the constructor() function with the injector. What does work however is make an alternate "init" function that you can then pass parameters to.

@Injectable()
export class ParentService {
  root:string = "This content comes from: ";
  myString:string = "The Parent";
  resultString:string;
  constructor(){
    this.init();
  }
  init() {
    this.resultString = this.root + this.myString;
  }
}


@Injectable()
export class ChildService extends ParentService {
  constructor(){
    super();
  }
  init() {
    this.myString = "The Child";
    super.init();
  }
}

通过这种方式，您可以在子对象上设置值或将其传递给父对象.

In this way you can set values on the child object or pass them through to the parent.

正在采取行动的这一点

这篇关于Angular:扩展服务和传递参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！