Question

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

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

我曾尝试过use this solution，但似乎其中一些功能已被弃用，而且我无法转换它。

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

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>

我有像这样的全局导出：

export let loadingTemplate = '';

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

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>

这样我可以使用任何视图组件中的加载器并将其传递给自己的加载模板，例如“提取天气”，“加载数据”等。或者＆＃39;请等待＆＃39;。

我希望这对我在这里尝试实现的目标有所了解。真的很感激一些帮助。

非常感谢提前！

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

0 个答案: