Javascript Angular 4将模板传递给服务组件

我是Angular 4的新手，正在尝试将自定义可翻译模板传递给我创建的加载服务

加载服务是导出并导入到客户端的组件。客户端需要能够根据调用加载服务的页面向加载服务发送自定义模板，并且该模板将具有来自客户端JSON文件的翻译支持

我已经尝试过了，但它的一些功能似乎已经被弃用，我在转换它时遇到了困难

以下是我的加载服务的组件代码：

import { Component, Input } from '@angular/core';
import { LoadingService } from './loading.service';

@Component({
    selector: 'loading-service',
    templateUrl: '',
    providers: [LoadingService]
})

export class LoadingComponent{

    @Input('src') templateUrl: string;

}

我希望此组件使用的模板是从客户端发送的模板，如下所示：

<loading-service [ngClass]="{'display-none': !loadingStatus}" [src]="loadingTemplate"></loading-service>
<router-outlet></router-outlet>

然后我可以在将生成加载服务实例的组件中分配：

import { Component, OnInit } from '@angular/core';
import { LoadingService } from 'ng2-loader';
import * as globals from 'globals';

@Component({
   templateUrl: '../../templates/weather.html'
})

export class WeatherComponent implements OnInit {

constructor(
    private loadingService: LoadingService
) {}

ngOnInit() {
    globals.loadingTemplate = '../../loading-weather.html';

    setTimeout(() => {
        this.loadingService.showLoader();
    }, 1);

    setTimeout(() => {
        this.loadingService.hideLoader();
    }, 1000 * 3);

}

最后是要发送到加载服务的自定义模板：

<div class="row align-center">
    <div class="col-12"><i class="fa fa-cog fa-spin fa-3x" aria-hidden="true"></i></div>
    <div class="col-12"><h3>{{ 'loading.weather' | translate }}</h3></div>
</div>

{{'loading.weather'| translate}}

通过这种方式，我可以从任何视图组件使用加载程序，并将其传递给自己的加载模板，例如“获取天气”、“加载数据”或“请稍候”

我希望这对我在这里努力实现的目标有一定的意义。非常感谢你的帮助

非常感谢

<div class="row align-center">
    <div class="col-12"><i class="fa fa-cog fa-spin fa-3x" aria-hidden="true"></i></div>
    <div class="col-12"><h3>{{ 'loading.weather' | translate }}</h3></div>
</div>