typescript - Creează TemplateRef într-un serviciu Angular 10

Folosim ngZorro într-un proiect Angular 10. Acum vreau să deschid drawer-ul (https://ng.ant.design/components/drawer/en) pentru a afișa formulare. Scenariul este o listă de, de exemplu, produse și la un clic pe unul dintre produse, formularul acestuia ar trebui să se deschidă în drawer.

Folosesc NzDrawerService pentru a crea sertarul, dar nu pot seta niciun footer (numit nzFooter).

De exemplu, există un ProductFormComponent, așa că în ProductService.ts pot pur și simplu să apelez:

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

Acum, există și o opțiune pentru un subsol predefinit (nzFooter?: string | TemplateRef<{}>), unde vreau să adaug butoanele pentru salvare și anulare. Acum întrebarea: Cum pot obține un TemplateRef aici, deoarece funcția este apelată într-un serviciu și nu într-un component?

Răspuns #1

Dacă aș avea un singur șablon pe care aș vrea să-l injectez într-un serviciu, aș folosi un component „dummy”, pe care l-aș folosi pentru a injecta un șablon în serviciul meu.

Poți adăuga o funcție pe serviciul de sertar pentru a seta un templateRef:

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

componenta ar arăta astfel:

@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);
  }
}

și în cele din urmă, găsiți componenta principală din aplicația dvs. și încărcați TemplateInjectorComponent, deoarece șablonul este doar <ng-template>, nimic nu este redat (un loc bun pentru a-l adăuga ar fi la sfârșitul componentului de layout).

Alternativ, în loc să creezi un component nou, îl poți adăuga la componenta principală a aplicației.