在 Angular 10 服务中创建 TemplateRef

Question

我们在 Angular 10 项目中使用 ngZorro。现在我想打开抽屉 (https://ng.ant.design/components/drawer/en) 来显示表格。场景是一个列表，例如产品，然后单击其中一个产品，它的表单应在抽屉中打开。

我正在使用 NzDrawerService 创建抽屉，但我无法设置任何页脚（称为 nzFooter）。

例如，有一个 ProductFormComponent，所以在我的 ProductService.ts 中我可以调用：

openForm(){
  const drawerRef = this.drawerService.create({
      nzTitle: 'My Title',
      nzContent: ProductFormComponent
  });
  drawerRef.open()
}

现在，还有一个预定义页脚 (nzFooter?: string | TemplateRef<{}>) 的选项，我想在其中添加保存和取消按钮。 现在的问题是：如何在此处获取 TemplateRef，因为该函数是在服务中而不是在组件中调用的？

Answer 1

如果我想将一个模板注入到服务中，我会使用一个“虚拟”组件，我将使用它来将一个模板注入到我的服务中。

您可以在抽屉服务上添加一个函数来设置模板引用：

private tempalte: TemplateRef<any>;
setTemplate(template: TemplateRef<any>) {
  this.tempalte = template;
}

组件看起来像：

@Component({
  selector: "template-injector",
  template: `
    <ng-template #myTemplate>
      <h1>Best Template!</h1>
    </ng-template>
  `,
  styleUrls: []
})
export class TemplateInjectorComponent implements AfterViewInit {
  constructor(private derviceService: DrawerService) {}

  @ViewChild("myTemplate") template: TemplateRef<any>;

  ngAfterViewInit(): void {
    this.derviceService.setTemplate(this.template);
  }
}

最后，在你的应用程序中找到一个主要组件并加载 TemplateInjectorComponent，因为模板只是 <ng-template>，所以没有渲染任何内容（添加它的好地方是在布局组件的末尾）。

或者，您可以将其添加到主应用程序组件中，而不是创建新组件。