如何在ngx-linkifyjs中禁用@提及与#哈希标签转换

我刚好碰到过类似的需求，ngx-linkifyjs底层依赖的是linkifyjs，所以我们可以通过配置解析选项，直接禁用#标签和@提及的链接转换，只保留普通URL的解析。下面给你几种不同场景的实现方式：

1. 在模板中使用管道时传入配置 #

如果你是用linkify管道来处理文本，可以直接在管道后追加配置参数，禁用hashtags和mentions：

<!-- 假设yourText是你要处理的文本变量 -->
<p>{{ yourText | linkify: { hashtags: false, mentions: false } }}</p>

2. 通过LinkifyService在代码中处理文本 #

如果是在组件类里用LinkifyService来处理文本，调用linkify方法时传入配置对象即可：

import { Component } from '@angular/core';
import { LinkifyService } from 'ngx-linkifyjs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  constructor(private linkifyService: LinkifyService) {}

  processText(rawText: string): string {
    // 传入配置禁用#和@的解析
    return this.linkifyService.linkify(rawText, { hashtags: false, mentions: false });
  }
}

3. 全局配置（一次性生效所有场景） #

如果希望整个项目都默认忽略#和@的链接转换，可以在导入LinkifyModule时用forRoot传入全局配置：

import { NgModule } from '@angular/core';
import { LinkifyModule } from 'ngx-linkifyjs';

@NgModule({
  imports: [
    // 全局禁用hashtags和mentions解析
    LinkifyModule.forRoot({
      hashtags: false,
      mentions: false
    })
  ]
})
export class AppModule {}

配置完成后，测试一下类似"Check out https://example.com #angular @dev"这样的文本，就只会把https://example.com转换成超链接，#angular和@dev会保持纯文本状态啦。

内容的提问来源于stack exchange，提问作者siddharth shah