訪問transcluded內容

我有我使用以顯示其在組件訪問transcluded內容

<gs-code> console.log("Asd")</gs-code>

組件看起來像這樣

code.component.ts transcluded的代碼塊中的組元

@Component({ 
     selector: 'gs-code', 
     providers: [], 
     viewProviders: [], 
     templateUrl: './code.component.html', 
     styleUrls: ['./code.component.less'] 
    }) 
    export class GsCodeComponent { 
     @Input() lang: string; 
     @Input() currentLang: string; 
     @ContentChild('content') content; 
     copied(event) { 
      console.log(event); 
     } 

     ngAfterContentInit() { 
      console.log(this.content, "content"); 
     } 
    }

code.component.html

<pre class="prettyprint"> 
    <ng-content #content></ng-content> 
</pre> 
<button class="btn btn-sm" title="Copy to clipboard" (click)="copied(content.innerHtml)"><i class="fa fa-clipboard"></i></button>

如何獲取組件中的橫向文本？我試過使用contentChild和#content作爲<ng-content #content></ng-content>。但這些都沒有奏效。

來源

2016-11-22 Gaurav Mukherjee

的DUP http://stackoverflow.com/questions/37573439/get-component-child-as-的innerHTML串/ 37586026＃37586026 –

<ng-content>元素永遠不會被添加到DOM本身，因此添加模板變量並查詢它不起作用。
您可以用另一個元素包裝<ng-content>並在其中添加模板變量並使用@ViewChild()來查詢此元素。

然後，你可以得到的包裝元素

@Component({ 
    selector: 'item', 
    template: '<div #wrapper><ng-content></ng-content></div>'}) 
class Item implements AfterContentInit { 

    @ViewChild('wrapper') wrapper:ElementRef; 
    @Input() type:string = "type-goes-here"; 

    ngAfterContentInit() { 
     console.log(this.wrapper.nativeElement.innerHTML); // or `wrapper.text` 
    } 
}

參見Get component child as string

來源

2016-11-22 08:37:28

訪問transcluded內容

回答

相關問題