如何在Angular中实现字符串内Hashtag可点击并获取点击值

我尝试将字符串中的Hashtag设置为可点击状态，并获取被点击的Hashtag值。曾尝试通过innerHTML传入自定义组件来实现，但未成功。

父组件代码：

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  tweet = 'This is a test tweet with a couple of #Hashtags in #Angular';
  ngOnInit() {
    this.tweet = this.tweet.replace(
      /#(\S+)/g,
      `<hello hashtag=\"$1\"></hello>`
    );
  }
}

子组件hello代码：

@Component({
  selector: 'hello',
  template: `<span *ngIf="hashtag" (click)="clickHashtag()">{{hashtag}}</span>`,
  styles: [],
})
export class HelloComponent {
  @Input() hashtag: string;
  clickHashtag() {
    alert(this.hashtag);
  }
}

但子组件hello完全未渲染，该如何解决？

问题根源 #

Angular的innerHTML属性仅会渲染原生HTML元素，不会识别、编译自定义组件标签。直接将字符串替换为<hello>标签后，Angular不会把这些标签转化为组件实例，因此子组件不会被渲染。

方案一：拆分文本为可渲染片段（推荐） #

无需依赖innerHTML，将原字符串拆分为普通文本和Hashtag片段数组，在模板中通过*ngFor循环渲染，根据片段类型选择显示普通文本或子组件。

修改父组件：

@Component({
  selector: 'my-app',
  template: `
    <ng-container *ngFor="let segment of tweetSegments">
      <span *ngIf="!segment.isHashtag">{{segment.content}}</span>
      <hello *ngIf="segment.isHashtag" [hashtag]="segment.content"></hello>
    </ng-container>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  tweet = 'This is a test tweet with a couple of #Hashtags in #Angular';
  tweetSegments: Array<{content: string, isHashtag: boolean}> = [];

  ngOnInit() {
    // 按#分割字符串，保留Hashtag片段
    const parts = this.tweet.split(/(#\S+)/);
    this.tweetSegments = parts
      .filter(part => part.trim() !== '')
      .map(part => ({
        content: part.startsWith('#') ? part.slice(1) : part,
        isHashtag: part.startsWith('#')
      }));
  }
}

子组件保持原有代码即可，Angular会正常编译并渲染hello组件，点击事件也能正常触发。

方案二：动态创建组件（复杂场景适用） #

如果必须通过动态DOM方式实现，可以使用ComponentFactoryResolver手动创建组件实例并插入到容器中：

1. 父组件模板添加容器：

<div #tweetContainer></div>

2. 修改父组件逻辑：

import { Component, OnInit, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { HelloComponent } from './hello.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  tweet = 'This is a test tweet with a couple of #Hashtags in #Angular';
  @ViewChild('tweetContainer', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) {}

  ngOnInit() {
    const parts = this.tweet.split(/(#\S+)/);
    parts
      .filter(part => part.trim() !== '')
      .forEach(part => {
        if (part.startsWith('#')) {
          // 创建hello组件实例
          const factory = this.resolver.resolveComponentFactory(HelloComponent);
          const componentRef = this.container.createComponent(factory);
          componentRef.instance.hashtag = part.slice(1);
        } else {
          // 添加普通文本节点
          const textNode = document.createTextNode(part);
          this.container.element.nativeElement.appendChild(textNode);
        }
      });
  }
}

注意：Angular 9+ Ivy编译器下可省略entryComponents配置，旧版本需在@NgModule的entryComponents数组中加入HelloComponent。

内容的提问来源于stack exchange，提问作者Uzair A.