如何编写需要构造函数参数的服务? [英] How to write a service that requires constructor parameters?

问题描述

我有一个声明MetricsService服务的组件.此服务需要HttpModule加上两个string来定义主机和要使用的身份验证密钥.

I have a component that declares the MetricsService service. This service requires both HttpModule plus two strings that defines the host and the auth key to use.

指标服务如下:

@Injectable()
export class MetricsService {
    constructor(
        private http: Http,
        public wsAuthKey: string,
        public wsHost: string
        ) {
        this.wsAuthKey  = wsAuthKey || "blahblahblahblahblahblahblahblah=";
        this.wsHost     = wsHost    || "https://preprod-admin.myservice.ws";
    }

使用它的组件编写如下:

The component that uses it is written as follows:

export class DatavizComponent implements OnInit, OnChanges {
    constructor(
        private zms: MetricsService,
    ) { 
    }

我的问题是我应该如何编写组件构造函数，以便整个工作正常进行，包括传递主机和密钥(但不传递http)?

My question is how should I write the component constructor so that the whole thing works, including passing the host and key (but not passing the http)?

注意:当前编写的代码无法编译.

Note : The code as currently written does not compile.

更准确地说，我希望该组件能够提供与应用相关的数据，如下所示:

To be more precise, I would expect the component to provided app-depending data something like this:

 export class DatavizComponent implements OnInit, OnChanges {
        constructor(
            private zms = MetricsService("http://myhost.com", "mykey"),
        ) { 
        }

但是如果可行，如何传递http?

But if this works, how to pass http?

建议的解决方案后进行更新:

UPDATE AFTER PROPOSED SOLUTION:

export class MetricsService {

    constructor(
        private http: Http,
        @Inject('wsAuthKey') @Optional() public wsAuthKey?: string,
        @Inject('wsHost') @Optional() public wsHost?: string
        ) {
        this.wsAuthKey  = wsAuthKey || "blahblah=";
        this.wsHost     = wsHost    || "https://preprod-admin.host.ws";


        console.log("MetricsService constructor="
            + " wsAuthKey="+this.wsAuthKey
            + ", wsHost="+this.wsHost
        );

    }

在组件中:

@Component({
    selector:    'dataviz-offers-volumes',
    templateUrl: 'app/dataviz.component.html',
    styleUrls:  ['app/dataviz.component.css'],
    encapsulation: ViewEncapsulation.None,
    providers: [
        {provide: 'wsAuthKey',  useValue: 'abc'}, 
        {provide: 'wsHost',     useValue: 'efg'}, 
    ],
})
export class DatavizComponent implements OnInit, OnChanges {

    @ViewChild('chart') private chartContainer: ElementRef;
    @Input() private graphId:string;
    @Input() private wsAuthKey:string;
    @Input() private wsHost:string;
    @Input() private maxSamples=12;

    constructor(
        private zms: MetricsService
    ) { 
    }

在构造函数中，日志如下(未传递值):

In the constructor, the log are as follows (value are not passed):

MetricsService constructor= wsAuthKey=blahblah=, wsHost=https://preprod-admin.host.ws

应该显示"abc"和"efg"的地方.

where it should show 'abc' and 'efg'.

但是我想知道使用dataviz componenet的组件是否没有问题. 在此组件中，传递了以下信息:

But I wonder if there is not an issue with the component that use dataviz componenet. In this component, the following information have been passed:

@Input() private wsAuthKey:string;
@Input() private wsHost:string;

我希望代码可以选择性地预设主机和密钥:

As I would like the tag to optionally preset the host and key:

                <h1>dataviz volume</h1>
                <div class="chartContainer left" title="Simultaneous offers via dataviz directive">
                    <dataviz-offers-volumes 
                        id="dataviz-volumes1"
                        [graphId]="graphId"
                        [wsAuthKey]="'myauthkey'"
                        [wsHost]="'http://myhost.com'"
                        [maxSamples]="123"
                    >
                    </dataviz-offers-volumes>
                </div>

推荐答案

您可以通过添加@Optional()(DI)和?(TypeScript)，并为不作为提供程序密钥支持的原始值添加@Inject(somekey)来使参数成为可选参数

You can make the parameters optional by adding @Optional() (DI) and ? (TypeScript), and @Inject(somekey) for primitive values that are not supported as provider keys

@Injectable()
export class MetricsService {
    constructor(
        private http: Http,
        @Inject('wsAuthKey') @Optional() public wsAuthKey?: string,
        @Inject('wsHost') @Optional() public wsHost?: string
        ) {
        this.wsAuthKey  = wsAuthKey || "blahblahblahblahblahblahblahblah=";
        this.wsHost     = wsHost    || "https://preprod-admin.myservice.ws";
    }

providers: [
  {provide: 'wsAuthKey', useValue: 'abc'}, 
  {provide: 'wsHost', useValue: 'efg'}, 
]

如果提供了它们，它们将被传递，否则它们将被忽略，但是DI仍然可以注入MetricsService.

If they are provided, they are passed, otherwise they are ignored, but DI still can inject the MetricsService.

这篇关于如何编写需要构造函数参数的服务?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！