$ 符号访问基类类的属性

Question

I am sharing code from my angular 8 application. As you can see below there are two classes. Base service class and child service class that derives from the base service class. As you can also see the child class is using the base class property like this ${this._baseUrl}. Could somebody tell me what does this notation mean ${}?

Base Service

@Injectable()
export class BaseService {

    _baseUrl: string = environment.apiBaseUrl;

    constructor(protected httpClient: HttpClient, protected _injector: Injector){}

    protected getRequestHeaders(): { headers: HttpHeaders | { [header: string]: string | string[]; } } {
        let headers = new HttpHeaders({
            'Content-Type': 'application/json',
            'Accept': `application/json, text/plain, */*`,
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'GET,DELETE,OPTIONS'
        });

        return { headers: headers };
    }

    protected getBaseUrl() : string {
        return this._baseUrl;
    }
}

cities service

@Injectable()
export class CitiesEndpoint extends BaseService {

    constructor(_httpClient: HttpClient, _injector: Injector) {
        super(_httpClient, _injector);
    }

    // city api endpoints

    getAllCities() {
        return `${this._baseUrl}/api/cities`;
    }

    deleteCity(id) {
        return `${this._baseUrl}/api/cities/delete-city//${id}`;
    }
}

Answer 1

Technical term for that is string interpolation.

Your cities service is an extension of your base service. And this._baseUrl in your cities service is defined in the base service, which is defined in your environment with property apiBaseUrl .

To conclude, if your apiBaseUrl is set with value stackoverflow.com , your function getAllCities() in your cities service would return stackoverflow.com/api/cities