Question

我在 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;
    }
}

这不起作用。需要什么改变？

Answer 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

标签实施|角度|

1 个答案: