javascript - 动态添加 span 标签到 <ng-content></ng-content> 内的链接

Question

我有一个带有 <ng-content> 的自定义列表项组件作为模板:

import { Component, Input } from '@angular/core';

@Component({
    selector: '[my-list-item]',
    template: '<ng-content></ng-content>'
})
export class MyListItemComponent {
    @Input() active = false; 
}

用户可以设置激活状态。

<ul>
    <li my-list-item [active]="true">
        <a href="#">Stackoverflow</a>
    </li>
</ul>

如果事件标志设置为 true，我必须在链接内添加一个自定义 span 标签，它应该像这样呈现:

<ul>
    <li>
        <a href="#">
            <span class="active">Stackoverflow</span>
        </a>
    </li>
</ul>

在 angular2 中推荐的方法是什么来完成这个？ 感谢您的任何建议

Answer 1

我会利用以下方法:

@Directive({ selector: 'li>a' })
export class MyAnchorDirective {
  constructor(private elRef: ElementRef, private rendered: Renderer) { }
  public wrapContent() {
    var el = this.elRef.nativeElement;
    this.rendered.setElementProperty(el, 'innerHTML', 
       `<span class="active">${el.innerHTML}</span>`);
  }
}

@Component({
  selector: '[my-list-item]',
  template: '<ng-content></ng-content>'
})
export class MyListItemComponent {
  @Input() active = false;
  @ContentChild(MyAnchorDirective) anchor: MyAnchorDirective;
  ngAfterContentInit() {
    if (this.active && this.anchor) {
      this.anchor.wrapContent();
    }
  }
}

@Component({
  selector: 'my-app',
  template: `
    <ul>
      <li my-list-item [active]="true">
          <a href="#">Stackoverflow</a>
      </li>
      <li my-list-item [active]="false">
          <a href="#">Stackoverflow2</a>
      </li>
    </ul>`
})
export class AppComponent { }

Plunker Example