在Angular中,可以使用@ViewChild装饰器和服务来传递模板引用。下面是一个示例:
首先,创建一个名为TemplateService的服务,并在其中定义一个公共字段,用于存储模板引用。例如:
import { Injectable, TemplateRef } from '@angular/core';
@Injectable()
export class TemplateService {
public templateRef: TemplateRef;
}
接下来,在要传递模板引用的组件中,注入TemplateService并使用@ViewChild装饰器来获取模板引用。例如:
import { Component, ViewChild, OnInit } from '@angular/core';
import { TemplateService } from './template.service';
@Component({
selector: 'app-child',
template: `
Child Component
`,
})
export class ChildComponent implements OnInit {
@ViewChild('template') templateRef: TemplateRef;
constructor(private templateService: TemplateService) {}
ngOnInit() {
// 通过服务来传递模板引用
this.templateService.templateRef = this.templateRef;
}
}
在上面的代码中,ChildComponent组件包含一个名为template的ng-template,并使用@ViewChild装饰器获取了该模板引用。然后,在ngOnInit生命周期钩子中,将模板引用赋值给TemplateService中的templateRef字段。
最后,在需要使用模板引用的另一个组件中,注入TemplateService并使用ng-container来渲染模板引用。例如:
import { Component, OnInit } from '@angular/core';
import { TemplateService } from './template.service';
@Component({
selector: 'app-parent',
template: `
`,
})
export class ParentComponent implements OnInit {
constructor(public templateService: TemplateService) {}
ngOnInit() {}
}
在上面的代码中,ParentComponent组件使用ng-container和ngTemplateOutlet指令来渲染TemplateService中保存的模板引用。
这样,你就可以通过@ViewChild和服务来传递模板引用了。