http कैसे एक सेवा निर्माता लिखने के लिए है जिसे कोणीय 2 में मापदंडों की आवश्यकता है?




angular service (2)

आप @Optional() वैकल्पिक @Optional() (डीआई) और जोड़कर पैरामीटर वैकल्पिक बना सकते हैं ? (टाइपस्क्रिप्ट), और @Inject(somekey) आदिम मानों के लिए प्रदाता कुंजियों के रूप में समर्थित नहीं हैं

@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 को इंजेक्ट कर MetricsService

https://code.i-harness.com

मेरे पास एक ऐसा घटक है जो मेट्रिक्ससेवा सेवा को घोषित करता है। इस सेवा के लिए एचटीएम मॉड्यूल प्लस दो स्ट्रिंग दोनों की आवश्यकता है जो मेजबान ans को ऑथ कुंजी को उपयोग करने के लिए परिभाषित करता है।

मैट्रिक्स सेवा इस प्रकार है:

@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";
    }

इसका उपयोग करने वाला घटक निम्न प्रकार से लिखा गया है:

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

मेरा प्रश्न यह है कि कैसे मुझे घटक कन्स्ट्रक्टर को लिखना चाहिए ताकि मेजबान और कुंजी (लेकिन http पारित नहीं कर) को पारित करने सहित पूरी चीज काम करती है?

नोट: वर्तमान में लिखे गए कोड संकलन नहीं करता है।

अधिक सटीक होने के लिए, मैं घटक से ऐप-आधारित डेटा प्रदान करता है जैसे कि कुछ:

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

लेकिन अगर यह काम करता है, तो कैसे http पारित करना है?

प्रस्तावित समाधान के बाद अद्यतन:

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
    ) { 
    }

निर्माता में, लॉग इस प्रकार हैं (मान पारित नहीं किया गया है):

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

जहां इसे 'एबीसी' और 'एफईजी' दिखाया जाना चाहिए

लेकिन मुझे आश्चर्य है कि अगर घटक के साथ एक मुद्दा नहीं है जो डेटाविज componenet का उपयोग करता है इस घटक में, निम्नलिखित सूचनाएं पारित की गई हैं:

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

जैसा कि मैं मेजबान और कुंजी को वैकल्पिक रूप से प्रीसेट करने के लिए टैग चाहूंगा:

                <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>

यह एक आम नुस्खा है जो विशेष रूप से इस प्रश्न में वर्णित है। यह एक ऐसी सेवा होनी चाहिए जो विन्यास रखती है:

@Injectable()
export class MetricsConfig {
  wsAuthKey = "blahblahblahblahblahblahblahblah=";
  wsHost = "https://preprod-admin.myservice.ws";
}

@Injectable()
export class MetricsService {
    constructor(
        private http: Http,
        metricsConfig: MetricsConfig
    ) {
        this.wsAuthKey  = metricsConfig.wsAuthKey;
        this.wsHost     = metricsConfig.wsHost;
    }
}

मामले में जब इसे बदलने की आवश्यकता होती है, तो इसे संपूर्ण मॉड्यूल या विशेष घटक के लिए ओवरराइड किया जा सकता है या बढ़ाया जा सकता है:

@Component(
  ...
  { provide: MetricsConfig, useClass: class ExtendedMetricsConfig { ... } }
)
export class DatavizComponent ...

इस मामले में MetricsConfig एक क्लास बनाने की कोई वास्तविक आवश्यकता नहीं है यह एक अपार टच मूल्य प्रदाता भी हो सकता है। लेकिन एक कक्षा को आसानी से बढ़ाया जा सकता है, यह इंजेक्ट करना आसान है और पहले से ही टाइपिंग के लिए इंटरफ़ेस प्रदान करता है।





components