angular2 service如何使用component组件数据

Question

1.我想要写一个公用的提示框，用的angula2官方的mobile框架，使用modal提示需要在service里引用其他组件里的数据
2.项目目录如下图：

3.warning.component.html:
<ng-template #tpl>
<p style="text-align: center;font-size:12px;">未认证的用户</p>
<p style="text-align: center;font-size:12px;">请联系客服处理</p>
</ng-template>
warning.component.ts:
import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
@Component({
selector: 'app-warning',
templateUrl: './warning.component.html',
styleUrls: ['./warning.component.less']
})
export class WarningComponent implements OnInit {
@ViewChild('tpl')
tplRef: TemplateRef<any>;
constructor() { }
ngOnInit() {}
}
引入到了public.module.ts里：
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { WarningComponent } from './warning/warning.component';
@NgModule({
imports: [

CommonModule

],
declarations: [WarningComponent],
exports: [WarningComponent]
})
export class PublicModule {}
component.service.ts:
import { Component, OnInit, Injectable} from '@angular/core';
import { Toast, Modal } from 'ng-zorro-antd-mobile';
import { WarningComponent } from 'src/app/shared/public/warning/warning.component';

@Injectable({
providedIn: 'root'
})
export class CommonService {
constructor(private warn: WarningComponent) { }
tplRef = this.warn.tplRef;
// 显示警告语
warnInfo() {

Modal.alert('错误', this.tplRef, [
  { text: '取消' },
  { text: '确定' }
]);

}
}
谢谢各位解答。

Answer 1

不能把component注入到service里面，正确的做法是warnInfo加一个TemplateRef参数，template由componet负责维护，其实warnInfo也是某个component调用的，让这个component把template传给warnInfo。

Answer 2

点击上面的调用test方法，可以执行modal但是加载不到template，用组件写成的按钮就可以，但是我想要直接用js调用的方式

已经解决 解决方法如下：

html以组件方式引入，
ts中调用子组件方法：

这里使用了viewChild调用子组件方法，