是否可以将组件的内容(ng-content)作为字符串获取?

Question

我们正在构建一个设计系统，对于我们的文档，我们希望在渲染组件旁边显示代码。

<br-code-example>
<br-button type="primary">
Primary default
</br-button>
</br-code-example>

是否可以将 ng 内容中的内容作为字符串获取(并将其保留在 ng 内容中以便渲染(？

<br-button type="primary">
Primary default
</br-button>

Answer 1

为ng-content标签提供一个模板变量。然后使用ContentChild在组件中访问它。

试试这个：

import { Component, Input, ContentChild } from '@angular/core';
@Component({
selector: 'hello',
template: `
<h1>Hello {{name}}!</h1>
<ng-content #projected></ng-content>
`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
@Input() name: string;
@ContentChild('projected', { static: false }) projectedContent;
ngAfterContentInit() {
console.log('child: ', this.projectedContent.nativeElement.innerHTML);
}
}

---

这是StackBlitz上为您的参考文献提供的工作代码示例。

Answer 2

因此，我们设法通过节点脚本生成页面component.html来获得所需的结果。

• br-code-example组件有一个输入，code该输入接受带有代码的字符串。
• 页面以 markdown 编写(带有问题中所述的<br-code-example>html 片段。
• 每次 markdown 文件更改时，节点脚本都会运行：
  • 浏览每个降价文件并搜索<br-code-example>标签
  • 获取这些标记之间的内容，并将其作为code道具添加到br-code-example
  • 将降价转换为 html
  • 将 html 另存为[page].component.html