'"content"' 类型的参数不可分配给 'TemplateRef<any>'.ts(2345) 类型的参数

Question

我想在单击按钮时打开一个模式。但我无法将模板引用传递给我的模态。我在 nav.component.ts 中遇到类型错误

在我的 nav.component.html

<button *ngIf="!loggedIn" class="btn btn-outline-success ms-3" (click)="open()">
    Sign Up
</button>

在 nav.component.ts 中：已编辑

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.scss']
})
export class NavComponent implements OnInit {

  constructor(
    public modalShared : ModalComponent
  ) { }

  ngOnInit(): void { 
  }

  open() {
    this.modalShared.openModal("'content'");
  }

}

在我的 modal.component.ts

import { Component, OnInit, TemplateRef, Input, Injectable } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';

@Injectable({
  providedIn: 'root'
})

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.scss']
})
export class ModalComponent implements OnInit {

  modalRef: BsModalRef = new BsModalRef();

  constructor(
    private modalService: BsModalService
  ) { }

  ngOnInit(): void {
  }

  openModal(template:TemplateRef<any>){
    this.modalRef = this.modalService.show(template);
  } 

}

还有我的 modal.component.html

<ng-template #content>
    <p>Click button is working!</p>
</ng-template>

Answer 1

您传递的是字符串而不是预期的 TemplateREf。您需要使用@ViewChild 来获取对templateRef 的引用。

@ViewChild('content')
content: TemplateRef<any>;

...

open() {
  this.modalShared.openModal(this.content);
}