如何更改离子标签的文本

how to alter text of ion-label

我有一个指令应该将字符串附加到离子标签元素。

/**
 * icon used everywhere to indicate this is a required form field
 * usage: <ion-label required> blah </ion-label>
 * outputs: <ion-label required> blah <span>*</span> </ion-label>
 */
@Directive({
  selector: 'ion-label[required]',
})
export class ReqIconComponent {

  constructor( el: ElementRef) {
    debugger;
    el.nativeElement.innerHTML = el.nativeElement.innerHTML.concat('<span> * </span>');
  }

}

如何访问 ion-label 元素中的 "blah" 文本值?

innerHTML 和 innerText 都是“”。 childNodes和children的长度都是0.

因为在构造函数中,视图没有被渲染所以你无法得到innerHTML。将代码移至 ngAfterViewInit 以等待视图完全呈现。

ngAfterViewInit(){
  this.el.nativeElement.innerHTML = this.el.nativeElement.innerHTML.concat('<span> * </span>');
}