Basic class constructor DI problems #913

New Issue

fergalmoran · 2025-08-09T17:18:09Z

fergalmoran commented

2025-08-09 17:18:09 +00:00

Originally created by @seven1986 on 3/23/2017

Inorder to adapt PC and Mobile device，I created files like this.

Most things in fetchdata.component.base.ts are enough

import { ReflectiveInjector } from '@angular/core/src/di';
import { apiService } from '../../common/apiService';

export class FetchDataComponentBase
{
    public forecasts: WeatherForecast[];

    constructor(api: apiService)
    {
        api.call('/api/SampleData/WeatherForecasts').subscribe(r =>
        {
            this.forecasts = r.json();
        });
    }
}

interface WeatherForecast {
    dateFormatted: string;
    temperatureC: number;
    temperatureF: number;
    summary: string;
}

fetchdata.component.ts

import { Component } from '@angular/core';
import { FetchDataComponentBase } from './fetchdata.component.base';

@Component({
    selector: 'fetchdata',
    templateUrl: './fetchdata.component.html'
})

export class FetchDataComponent extends FetchDataComponentBase {
}

pc.fetchdata.component.ts

import { Component } from '@angular/core';
import { FetchDataComponentBase } from './fetchdata.component.base';

@Component({
    selector: 'fetchdata',
    templateUrl: './pc.fetchdata.component.html'
})

export class FetchDataComponent extends FetchDataComponentBase {
}

But, when I run in PC browser, in fetchdata.component.base.ts the api:apiService is undefined.

Could you help me ? thank you

*Originally created by @seven1986 on 3/23/2017* ## Inorder to adapt PC and Mobile device，I created files like this. ![image](https://cloud.githubusercontent.com/assets/20808494/24228221/daaa9bac-0fad-11e7-9aa9-eab2f939dd0b.png) Most things in **fetchdata.component.base.ts** are enough ```typescript import { ReflectiveInjector } from '@angular/core/src/di'; import { apiService } from '../../common/apiService'; export class FetchDataComponentBase { public forecasts: WeatherForecast[]; constructor(api: apiService) { api.call('/api/SampleData/WeatherForecasts').subscribe(r => { this.forecasts = r.json(); }); } } interface WeatherForecast { dateFormatted: string; temperatureC: number; temperatureF: number; summary: string; } ``` **fetchdata.component.ts** ```typescript import { Component } from '@angular/core'; import { FetchDataComponentBase } from './fetchdata.component.base'; @Component({ selector: 'fetchdata', templateUrl: './fetchdata.component.html' }) export class FetchDataComponent extends FetchDataComponentBase { } ``` **pc.fetchdata.component.ts** ```typescript import { Component } from '@angular/core'; import { FetchDataComponentBase } from './fetchdata.component.base'; @Component({ selector: 'fetchdata', templateUrl: './pc.fetchdata.component.html' }) export class FetchDataComponent extends FetchDataComponentBase { } ``` But, when I run in PC browser, in **fetchdata.component.base.ts** the **api:apiService** is undefined. ![5](https://cloud.githubusercontent.com/assets/20808494/24229332/e4bde742-0fb3-11e7-8501-50b8466e5ae3.png) ### Could you help me ? thank you

fergalmoran closed this issue

2025-08-09 17:18:09 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#913