如何将数据传递给 ng-bootstrap 弹出窗口

Question

我正在用 Bootstrap 编写一个 Angular 应用程序，使用 ng-bootstrap。我有一个封装在这样的组件中的弹出窗口：

HTML（弹出组件）

<div>
  <div>Data 1: <i>{{ v.data1 }}</i></div>
  <div>Data 2: <i>{{ v.data2 }}</i></div>
</div>

此弹出窗口在另一个组件中打开：

HTML

<div *ngFor="let v of vector">
    <span [ngbPopover]="popOver" popoverTitle="Pop title">Open</span>
</div>

<ng-template #popOver>
    <popover></popover>
</ng-template>

我需要将 ngFor 的 v 参数传递给 popover。我怎样才能做到这一点？

Answer 1

这是angularhow to pass data to component的基本技术。

因此您需要更新弹出组件：

popover.component.html

<div>
  <div>Data 1: <i>{{ data.data1 }}</i></div>
  <div>Data 2: <i>{{ data.data2 }}</i></div>
</div>

popover.component.ts

@Component({
  selector: 'popover',
  templateUrl: './popover.component.html'
})
export class PopoverComponent {
  @Input() data: any;
}

然后更新你的 ngFor：

<div *ngFor="let v of vector">
  <span [ngbPopover]="popOver" popoverTitle="Pop title">Open</span>
  <ng-template #popOver>
    <popover [data]="v"></popover>
  </ng-template>
</div>

这是一个例子https://stackblitz.com/edit/angular-laqjog

如何将数据传递给 ng-bootstrap 弹出窗口

How to pass data to an ng-bootstrap popover

angular

twitter-bootstrap-4

ng-bootstrap