Angular。模板中的自定义标签选择器

Question

我重构了一个字符串。这就是为什么我需要一个组件 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

Answer 1

您必须更改 TextNodeComponent 的选择器以包含跨度：

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

这样它就不会默认为 <div>。

工作示例：

stack

Angular。模板中的自定义标签选择器

Angular. Custom tag selector in ng-template

angular

angular9