时间戳

首页 > 解决方案 > 角。用组件替换字符串中的单词

angular - 角。用组件替换字符串中的单词

问题描述

Angular 9。我是新手。我有一个字符串（命名为message）和用户数组（as users）在TextInMessageComponent：

import { Component, OnInit, Input } from '@angular/core';
import { Router } from '@angular/router';

import { User } from 'app/models/user';

@Component({
  selector: '.text-in-message',
  templateUrl: './text-in-message.component.html',
  styleUrls: ['text-in-message.component.scss'],
})
export class TextInMessageComponent implements OnInit {
  @Input() message: string;
  @Input() users: User[];

  constructor(private router: Router) {}

  ngOnInit() {}

  private escapeRegExp(str) {
    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  }
}

我也有UserInMessageComponent组件来绑定一些逻辑（onclick等）：

import { Component, OnInit, Input, HostBinding } from '@angular/core';
import { Router } from '@angular/router';

import { User } from 'app/models/user';

@Component({
  selector: '.user-in-message',
  template: `{{ user.username }}`,
  styleUrls: ['user-in-message.component.scss'],
})
export class UserInMessageComponent implements OnInit {
  @Input() user: User;

  constructor(private router: Router) {}

  @HostBinding('style.color') color: string;
  @HostBinding('class.font-1') isFont1: boolean;
  @HostBinding('class.font-2') isFont2: boolean;
  @HostBinding('class.font-3') isFont3: boolean;
  @HostBinding('class.font-4') isFont4: boolean;
  @HostBinding('class.font-5') isFont5: boolean;
  @HostBinding('class.font-6') isFont6: boolean;
  @HostBinding('class.font-7') isFont7: boolean;
  @HostBinding('class.font-8') isFont8: boolean;

  ngOnInit() {
    this.color = this.pickHlsColor(this.user.nameColor);
    for (let i = 1; i < 9; i += 1) {
      const propname = `isFont{i}`;
      this[propname] = this.pickFont(i);
    }
  }

  pickFont(type): boolean {
    return this.user.nameFont === `font-${type}`;
  }

  pickHlsColor(value) {
    const n = value.split(',');
    return `hsl(${n[0]}, ${n[1]}%, ${n[2]}%)`;
  }
}

我需要用正确的替换每个usernamein messagefrom 。但我真的不知道如何谷歌它:(TextInMessageComponentUserInMessageComponent

我试过了：

export class TextInMessageComponent implements OnInit {
  @Input() message: string;
  @Input() users: User[];

  constructor(private router: Router) {}

  ngOnInit() {
    this.users
      .sort((a, b) => b.username.length - a.username.length)
      .map((recepient, index) => {
        const { username } = recepient;
        const escapedString = this.escapeRegExp(username);
        const regexp = new RegExp(escapedString, 'g');
        this.message = this.message.replace(regexp, `%%s${index}%%`);
        return recepient;
      })
      .forEach((recepient, index) => {
        const searchString = `%%s${index}%%`;
        const regexp = new RegExp(searchString, 'g');
        const userReplacement = `<span class="user-in-message" [user]="${recepient}">Loadin user-in-message componen...</span>`;
        this.message = this.message.replace(regexp, userReplacement);
      });
  }

  private escapeRegExp(str) {
    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  }
}

但不工作:(

我现在在 html 页面中的输出是：

Chuck Norris: <span class="user-in-message" [user]="[object Object]">Loading user-in-message componen...</span>, I've heard Chuck Norris was going to be a playable character in SSBB. His hammer-using animation would be him moving the hammer in a full circle with only his left pinky. It turns out that he is stronger than that.

span class="user-in-message"应该是正确的组件

标签： angularangular9

解决方案

在这种情况下，正确的技术是使用组件工厂。字符串的每一块都将被分隔开来。

推荐阅读