通过指令修改内部内容

Question

我卡住了。我正在尝试在标签中的文本后添加一个额外的符号。我做了一个指令，其中包含以下代码：

@Directive({
  selector: '[myDirective]'
})
export class MyDirective{

  constructor(private el: ElementRef) {

      this.el.nativeElement.insertAdjacentHTML('beforeend', '<span style="color: red">*</span>');
  }
  @Input('myDirective') myDirective: string;
}

然后在 label 标签中我以这种方式添加这个指令名称：

<label myDirective>some text</label>

该指令应在 'some text' 文本后添加这个额外的星号。但不起作用。 'this text' 之前仍在添加额外的星号。所以我得到了 '*一些文本'。我不知道如何实现这一点，你能帮忙吗？

Answer 1

在呈现视图后移动您的代码。

@Directive({
  selector: '[myDirective]'
})
export class MyDirective{

  @Input('myDirective') myDirective: string; 

  constructor(private el: ElementRef) {
  }

  ngAfterViewInit() {
      this.el.nativeElement.insertAdjacentHTML('beforeend', '<span style="color: red">*</span>');
  }
}

https://stackblitz.com/edit/so-angular-directive-to-modify-label-content

通过指令修改内部内容

Modify inner content through Directive

angular

directive