Javascript 动态将跨度标记添加到内部链接<；天然气含量></天然气含量>；

我有一个自定义列表项组件，其模板为

：

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

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

从'@angular/core'导入{Component，Input}；
@组成部分({
选择器：“[我的列表项]”，
模板：“”
})
导出类MyListItemComponent{
@Input（）active=false；
}

用户可以设置活动状态

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

如果active flag设置为true，我必须在链接内添加一个自定义span标记，它应该如下所示呈现：

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

在angular2中，实现这一点的推荐方法是什么？

---

感谢您的建议

在内部设置一个div，然后设置任何div内容

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

<script>
document.getElementById('you_can_do_it_in_a_div').innerHTML = 'whatever';
</script>

document.getElementById（'you_can__do_it_in_a_div'）。innerHTML='whatever'；

在内部设置一个div，然后设置任何div内容

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

<script>
document.getElementById('you_can_do_it_in_a_div').innerHTML = 'whatever';
</script>

document.getElementById（'you_can__do_it_in_a_div'）。innerHTML='whatever'；

未测试

您的占位符应该是

<ng-content *ngIf="active"></ng-content>

在主html文件中

修改要修改的组件

    import Component from '@angular/core';

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

从“@angular/core”导入组件；
@组成部分({
选择器：“[我的列表项]”，
模板：`




`
})
导出类MyListItemComponent{
主动=假；
}

请注意模板语法，它是backtick（`）-与单引号（'）不同的字符-允许您在几行上组成字符串，这使HTML更具可读性

为什么要顺便导入输入？

未测试

您的占位符应该是

<ng-content *ngIf="active"></ng-content>

在主html文件中

修改要修改的组件

    import Component from '@angular/core';

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

从“@angular/core”导入组件；
@组成部分({
选择器：“[我的列表项]”，
模板：`




`
})
导出类MyListItemComponent{
主动=假；
}

请注意模板语法，它是backtick（`）-与单引号（'）不同的字符-允许您在几行上组成字符串，这使HTML更具可读性

---

为什么要顺便导入输入？

我将利用以下方法：

@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 { }

@指令（{selector:'li>a'}）
导出类粘虫直视{
构造函数（private-elRef:ElementRef，private-rendered:Renderer）{}
公共包装内容（）{
var el=this.elRef.nativeElement；
this.rendered.setElementProperty（el，'innerHTML'，
`${el.innerHTML}`）；
}
}
@组成部分({
选择器：“[我的列表项]”，
模板：“”
})
导出类MyListItemComponent{
@Input（）active=false；
@ContentChild（myanchordrective）锚：myanchordrective；
ngAfterContentInit（）{
if（this.active&&this.anchor）{
this.anchor.wrapContent（）；
}
}
}
@组成部分({
选择器：“我的应用程序”，
模板：`





`
})
导出类AppComponent{}

---

我将利用以下方法：

@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 { }

@指令（{selector:'li>a'}）
导出类粘虫直视{
构造函数（private-elRef:ElementRef，private-rendered:Renderer）{}
公共包装内容（）{
var el=this.elRef.nativeElement；
this.rendered.setElementProperty（el，'innerHTML'，
`${el.innerHTML}`）；
}
}
@组成部分({
选择器：“[我的列表项]”，
模板：“”
})
导出类MyListItemComponent{
@Input（）active=false；
@ContentChild（myanchordrective）锚：myanchordrective；
ngAfterContentInit（）{
if（this.active&&this.anchor）{
this.anchor.wrapContent（）；
}
}
}
@组成部分({
选择器：“我的应用程序”，
模板：`





`
})
导出类AppComponent{}