HTML 和弹出窗口中的绑定 (Angular)

Question

我希望我的弹出窗口包含 HTML，所以我尝试这样做：

<ng-template #popContent>This is a pop content</b>!</ng-template>
<ng-template #popTitle>Fancy <b>content!!</b></ng-template>
<button type="button" [ngbPopover]="popContent" [popoverTitle]="popTitle">
My button
</button>

但是我得到这个错误： 无法绑定到 'ngbPopover'，因为它不是 'button' 的已知 属性。

我认为它应该像 ng-bootstrap 文档中那样工作：https://ng-bootstrap.github.io/#/components/popover/examples。 有人可以帮忙吗？

Answer 1

看起来您在第一个 ng-template 中的格式不正确 HTML。您错过了开场白 。

我把它放在 stackblitz 中，它 运行 很好：

<ng-template #popContent><b>This is a pop content</b>!</ng-template>
<ng-template #popTitle>Fancy <b>content!!</b></ng-template>
<button type="button" [ngbPopover]="popContent" [popoverTitle]="popTitle">
My button
</button> 

更新：

我安装了一个全新的 Angular 项目 ng new

我添加了 ng-bootstrap 和 ng add @ng-bootstrap/ng-bootstrap - 这个安装包 ng-bootstrap v9.1.3 和 bootstrap v4.5.

我已经替换了 app.component.html 中的样板代码，现在看起来像：

<router-outlet></router-outlet>

<ng-template #popContent><b>This is a pop content</b>!</ng-template>
<ng-template #popTitle>Fancy <b>content!!</b></ng-template>
<button type="button" [ngbPopover]="popContent" [popoverTitle]="popTitle">
  My button
</button>

这是我的 app.module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

因此它看起来与代码无关（一旦修复了无效的 HTML）。

只更新了app.component.html和app.module.ts，能分享一下你的版本吗？

此外，您 Angular 等是什么版本 运行。可以分享 package.json 吗？

谢谢