Angular. Заменить слово в строке компонентом - PullRequest
Новая
       0

Angular. Заменить слово в строке компонентом

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

Angular 9. Я новичок в этом. У меня есть строка (названная message) и массив пользователей (как 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 для привязки некоторых логи c (onclick et c.): 

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]}%)`;
  }
}

Мне нужно заменить каждый username в message из TextInMessageComponent на правильный UserInMessageComponent. Но я действительно не знаю, как Google это: (

Я пытался: 

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" должен быть правильный компонент

1 Ответ

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

В этом случае правильной техникой является использование Component Factory. Каждый кусок строки будет разделен компонентом.

...