ng-bootstrap Popover - 如何从大字符串中添加指向单个单词的链接

Question

我有一个为每个学生显示警报的图标。它包含一些大字符串，我需要根据一些变量添加一些链接。

警报输入示例：“Alex 是数学中最好的学生，成绩为 6。”。
警报输出示例：“Alex”是可点击的（但我需要使用 Angular Router 以避免重新加载页面）。 'Alex' 是我从 'item.item.alert' 获得的变量。
'item.item.alert' 字符串示例：'ALEX|MATH|6' 其中第一个元素是学生姓名，第二个元素是课程，第三个元素是其成绩。所以我使用 'FormatAlert' 函数格式化这个字符串。

总而言之，我需要让“Alex”或任何给定的学生可点击。我尝试添加一个单击事件侦听器，但是当我使用 @ViewChild 和 ngAfterViewInit() 打印“#coursesAlert”时，我总是得到“未定义”的“null”。

...
<ng-template #courses let-item="value">
    <!-- Template of Popover --> 
    <ng-template #coursesAlert>
        <div [innerHTML]="FormatAlert(item.item.alert) | safeHtml"></div> <--- Alert output (to fix)
    </ng-template>
    <!-- Popover Configuration -->
    <div class="hidden-md-down">
        <span>{{item.item.id}}</span>
        <i *ngIf="item.item.alert" 
            class="fas fa-exclamation-circle text-danger ml-1 mr-1"
            #popoverAlert="ngbPopover"
            [ngbPopover]="coursesAlert"
            [closeDelay]="3000"
            [container]="'body'"
            triggers="mouseenter:mouseleave"
            placement="right">
        </i>
    </div>
</ng-template>

我只是复制这里的情况（目标是在大文本上只处理一个单词）： https://stackblitz.com/edit/angular-mdqz9b-74ins9?embed=1&file=src/app/popover-tplcontent.html

Answer 1

我的理解是，您只想将名称设为可点击。我重构了您的 formatGrades 方法以分别返回名称和内容。

formatGrades: any[] = this.grades.split("|||").map(grade => {
    let name: string = grade.split("|")[0];
    let course: string = grade.split("|")[1];
    let gradeResult: string = grade.split("|")[2];
    
    var content = " got in " + course + " the grade of: " + gradeResult + '.';
    
    return {name : name, content: content};

  });

  onNameClick(e){
    console.log('onNameClick');
    console.log(e);
  }

现在在 UI 中可以使名称成为可点击按钮。您也可以在此处使用 css 设置按钮样式。

<div *ngFor="let item of formatGrades">
  <i
    *ngIf="item"
    class="fas fa-exclamation-circle text-danger ml-1 mr-1"
    #popoverAlert="ngbPopover"
    [ngbPopover]="publicAlertContent"
    [closeDelay]="3000"
    [container]="'body'"
    triggers="mouseenter:mouseleave"
    placement="right"
  >
  </i>
  <br />
  <br />
  <ng-template #publicAlertContent>
    <div>
      <button (click)="onNameClick($event)">{{item.name}}</button>
      <span>{{item.content}}</span>
    </div>
  </ng-template>
</div>