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”文本后添加此额外的asterix。但是不起作用。额外的星号符号仍在“此文本”之前添加。所以我得到了 '*一些文字'。我不知道如何实现这一点，你能帮忙吗？

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

通过指令修改内部内容

1 个答案: