Почему не применяется стиль к классу Angular 5

153

22 апреля 2018, 22:44

Введено слово находим в тексте с помощью регулярного выражения и вкладиваем в <span class = "match"> слово </ span> с помощью пайпа. Спан и класс приминяеться, но стиль по этому классу не работает ((

import { Pipe, PipeTransform } from '@angular/core';
import { PageService } from '../services/page.service';
@Pipe({
  name: 'matchWord',
  pure: false
})
export class MatchWordPipe implements PipeTransform {
  constructor(private pageService: PageService) { }
  transform(value: any, args?: any): any {
    const pattern = new RegExp(this.pageService.inputSearchText , "ig");
    value = value.replace(pattern, (str) => {
      return `<span class="match">${str}</span>`;          
    });
    return value;
  }
}

В html :

<p [innerHTML]="sentence | matchWord"></p>

Уже и так пробовал не помогает

return `<span style="background-color:green;">${str}</span>`;

и так

return `<span [ngStyle]="{'background-color':'green'}">${str}</span>`;

Answer 1

Попробуйте такой вариант:

    import { Pipe, PipeTransform } from '@angular/core';
    import { PageService } from '../services/page.service';
    @Pipe({
      name: 'matchWord',
      pure: false
    })
    export class MatchWordPipe implements PipeTransform {
      constructor(private pageService: PageService) { }
      transform(value: any, args?: any): any {
        const pattern = new RegExp(this.pageService.inputSearchText , "ig");
        value = value.replace(pattern, (str) => {
          return `<style> span { background-color:green; } </style>
                  <span>${str}</span>`;          
        });
        return value;
      }
    }

Answer 2

Достаточно отменить инкапсуляцию в компоненте и все работает.

import {Component, ViewEncapsulation } from '@angular/core';
@Component({
  selector: '...',
  templateUrl: '...html',
  styles: ['...css'],
  encapsulation: ViewEncapsulation.None
})