Angular. Выборочный тег в ng-шаблоне - PullRequest
Новая
       5

Angular. Выборочный тег в ng-шаблоне

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

Я рефакторинг строки. Поэтому для этого мне нужен компонент с ComponentFactoryResolver: 

@Component({
  selector: '[text-in-message]',
  template: `<ng-template chunk></ng-template>`,
})
export class TextInMessageComponent implements OnInit {
  @Input() message: string;
  @ViewChild(ChunkInMessageDirective, { static: true })
  chunkOfMessage: ChunkInMessageDirective;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

Проблема в том, что, когда я использую viewContainerRef.createComponent, он создает блок div. И, в моем случае, мне нужен элемент inline, например span. Я пытался styles: [':host{display: "inlilne"}'],, но это не работает. Как я могу установить тег для созданного компонента или стиля связывания?

Кроме того, в этом компоненте у меня есть методы: 

  ngOnInit() {
    this.refactorText();
  }

  refactorText() {
    const { viewContainerRef } = this.chunkOfMessage;
    viewContainerRef.clear();

    const textNodeFactory = this.componentFactoryResolver.resolveComponentFactory(
      TextNodeComponent
    );
    const textNodeComponentRef: any = viewContainerRef.createComponent(
      textNodeFactory
    );
    (textNodeComponentRef.instance as TextNodeComponent).text = this.message;
  }

Также TextNodeComponent, если кому-то нужно. У него может быть случайный шаблон. 

@Component({
  selector: '[text-chunk-in-message]',
  template: `{{ text }}`,
})
export class TextNodeComponent implements OnInit {
  @Input() text: string;
  constructor() {}
  ngOnInit() {}
}

В результате я получил: 

<div text-chunk-in-message="">A mere glimpse of Chuck Norris bearded member gave engineers the idea for the Alaska Pipeline.</div>

Но мне нужно span вместо div

1 Ответ

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

Вы должны изменить селектор TextNodeComponent, чтобы включить диапазон: 

@Component({
  selector: 'span[text-chunk-in-message]',
  template: `{{ text }}`,
})

Таким образом, по умолчанию он не будет <div>.

Рабочий пример:

стек

...