标签实施 |角 |答案

【问题标题】：Hashtag implementation | Angular |标签实施 |角 |
【发布时间】：2020-07-28 13:28:05
【问题描述】：

我在 HTML 中有以下代码：使用 Angular 材料使用表单创建文本框：

<form (ngSubmit)="onSubmit()" [formGroup]="myForm" #f="ngForm">
        <mat-form-field appearance="outline" class="postField">
            <textarea matInput placeholder="Say something.." name="postBody" 
            formControlName="postBody" type="text" [ngModel]="postBody | hashtag" 
                (ngModelChange)="postBody=$event" >
                </textarea>
        </mat-form-field>
        <br/>
        <button mat-raised-button color="primary" [disabled]="isDisabled"> Post </button>
    </form>

我正在尝试在 twitter/fb 中实现主题标签功能，其中在撰写帖子和使用 #something... 时，文本和哈希值会突出显示为蓝色。尝试使用管道实现。下面是ts文件。

import { PipeTransform, Pipe } from '@angular/core';

@Pipe({ name: 'hashtag' })
export class HashtagPipe implements PipeTransform {
    constructor() {}

    transform(text: string){
        let text1;
        if (text.indexOf('#') !== -1) {
            const str = text.replace(/#/g, '<span class="highlighted"></span>');
            text1 = text;
        } else {
            text1 = text;
        }
        return text1;
    }
}

这不起作用。需要进行哪些更改？

【问题讨论】：

标签： angular angular-material hashtag

【解决方案1】：

将主题标签管道转换方法更改为

 transform(text: string){
        let text1;
        if (text.indexOf('#') !== -1) {
            text1 = text + ' '; 
            const matches = text1.match(/#(.*?) /g);
            for(let i = 0; i < matches.length; i++){
              text1 = text1.replace(matches[i], '<span class="highlighted">' + matches[i] + '</span>');
            }
        } else {
            text1 = text;
        }
        return text1;
    }

另外，请查看以下内容：https://stackblitz.com/edit/angular-iy46gj?file=src%2Fapp%2Fhashtag.pipe.ts

【讨论】：