http - كيفية كتابة منشئ الخدمة التي تتطلب المعلمات في الزاوي 2؟




angular service (2)

هذه وصفة شائعة موصوفة في هذا السؤال على وجه الخصوص. يجب أن تكون الخدمة التي تحمل التكوين:

@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 فئة في هذه الحالة. يمكن أن يكون موفر قيمة أوباكيتوكين كذلك. ولكن فئة يمكن تمديد مريح، فمن الأسهل للحقن ويوفر بالفعل واجهة للكتابة.

لدي عنصر يعلن خدمة ميتريكسيرفيس. تتطلب هذه الخدمة كلا من وحدة هتب بالإضافة إلى سلسلتين تعرفان المضيف على مفتاح المصادقة المطلوب استخدامه.

خدمة المقاييس هي كما يلي:

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

سؤالي هو كيف يمكنني كتابة منشئ المكون بحيث يعمل كل شيء، بما في ذلك تمرير المضيف والمفتاح (ولكن لا يمر هتب)؟

ملاحظة: التعليمات البرمجية كما هو مكتوب حاليا لا تجميع.

ولكي تكون أكثر دقة، أتوقع أن يقدم المكون بيانات تعتمد على التطبيق مثل هذا:

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

ولكن إذا كان هذا يعمل، وكيفية تمرير هتب؟

التحديث بعد الحل المقترح:

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

حيث يجب أن تظهر 'أبك' و 'إفغ'.

ولكن أتساءل عما إذا لم يكن هناك مشكلة مع المكون الذي يستخدم داتافيز كومبونينيت. في هذا المكون، تم تمرير المعلومات التالية:

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

يمكنك جعل المعلمات اختياري عن طريق إضافة @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'}, 
]

إذا تم توفيرها، يتم تمريرها، وإلا يتم تجاهلها، ولكن دي لا يزال يمكن حقن MetricsService .







components