Primeng 菜单栏 ng-template 开始和结束或即使在示例中以相同的方式执行后也不显示

Question

我正在尝试使用此处提供的示例，但不知何故我无法使其与 ng-templates 一起使用。修改了示例中提供的 stackblitz 并尝试过但没有运气。请帮我弄清楚我错过了什么 下面是我的标题代码

<p-menubar [model]="items">
  <ng-template pTemplate="start">
    <img src="assets/showcase/images/primeng.svg" height="40" class="p-mr-2">
  </ng-template>
 <ng-template pTemplate="end">
    <input type="text" pInputText placeholder="Search">
 </ng-template>
</p-menubar>

我的本地包是

 {
"@angular/animations": "~9.1.3",
"@angular/common": "~9.1.3",
"@angular/compiler": "~9.1.3",
"@angular/core": "~9.1.3",
"@angular/forms": "~9.1.3",
"@angular/platform-browser": "~9.1.3",
"@angular/platform-browser-dynamic": "~9.1.3",
"@angular/router": "~9.1.3",
"ngx-electron": "^2.2.0",
"primeicons": "^4.1.0",
"primeng": "^11.4.0",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
}

Answer 1

根据评论更新答案：所需输出所需app.module.ts的imports数组中缺少一个模块导入。因此，请导入TabViewModule并将其添加到导入数组中。

添加导入数组：

  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MenubarModule,
    InputTextModule,
    TabViewModule,
  ]

和 HTML 模板：

<p-menubar [model]="items">
  <ng-template pTemplate="start">
    <img src="assets/primeng.svg" height="40" class="p-mr-2">
  </ng-template>
  <ng-template pTemplate="end">
    <input type="text" pInputText placeholder="Search">
  </ng-template>
</p-menubar>

请参阅此处的更新演示链接。

演示图像供参考：

Answer 2

虽然导入 TabViewModule （在 Ali 的回答中）使问题消失，但我认为SharedModule从 primeng/api 导入就足够了（TabViewModule 导入 SharedModule ，它定义了必要的PrimeTemplate类）。