给出这样的组件:
import { Component, ElementRef, AfterContentInit, ContentChild } from "@angular/core";
@Component({
selector: "app-link",
template: `
<a href="#">
<ng-content></ng-content>
</a>
`,
})
export class LinkComponent implements AfterContentInit {
@ContentChild(LinkComponent, {read: ElementRef}) contentChild: ElementRef;
ngAfterContentInit() {
console.log(this.contentChild.nativeElement.childNodes[0].childNodes[0]);
}
}
以及该组件的用法如下:
<app-link>
This is a text link.
</app-link>
使用此代码,控制台将记录#text " This is a text link. "
。我想修剪前后有多余的空格。
我是否有可能在浏览器中看到<ng-content>
并对其进行操作/将其插入使用该组件的HTML的DOM中?
我本来以为AfterContentInit
和AfterViewInit
之间的区别将提供答案,但是经过进一步的研究和测试,我认为并非如此。我知道可以通过执行<app-link>This is a text link.</app-link>
来避免这种情况,但是尝试这样做的目的是使这种区别变得不必要。