ng-bootstrap Popover - 如何将 link 添加到大字符串中的单个单词

Question

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

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

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

...
<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>

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

Answer 1

据我了解，您想让名称仅可点击。我将您的 formatGrades 方法分别重构为 return 名称和内容。

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>

ng-bootstrap Popover - 如何将 link 添加到大字符串中的单个单词

ng-bootstrap Popover - How to add a link to a single word from a large string

javascript

angular

popover

angular-bootstrap

viewchild