動態添加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，我一定要添加鏈接內的自定義範圍標記，它應該呈現這樣的：

<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

Answer 2

設置一個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> 

Answer 3

未經測試。

你的佔位符應該像

<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; 
    } 

小心模板語法，它是反引號（`）哪位與單引號（'）不一樣的字符 - 允許您在幾行內編寫一個字符串，這使得HTML更具可讀性。

你爲什麼要通過這種方式導入輸入？