Реализация хэштега | Angular | - PullRequest
Новая
       37

Реализация хэштега | Angular |

0 голосов
/ 15 апреля 2020

У меня есть код ниже в 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>

Я пытаюсь реализовать функциональность хэштега, как в твиттере / fb где при написании поста и использовании #something ... текст вместе с ha sh выделяется синим цветом. Попытка реализации с использованием труб. Ниже приведен файл 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;
    }
}

Это не работает. какие изменения нужны?

1 Ответ

0 голосов
/ 15 апреля 2020

Измените метод преобразования хештега на 

 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

...