我有一个组件,我用它来显示一个代码块,该代码块在组件中被转换
<gs-code> console.log("Asd")</gs-code>
该组件看起来像这样
code.component.ts
@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>.但这些都没有奏效.
< ng-content> element永远不会被添加到DOM本身,因此添加模板变量并查询它不起作用.
你可以包装< ng-content>使用另一个元素并在其中添加模板变量并使用@ViewChild()查询此元素.
你可以包装< ng-content>使用另一个元素并在其中添加模板变量并使用@ViewChild()查询此元素.
然后你可以得到包装元素的innerHTML
@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`
}
}
