获取 ng-content 的原始/原始模板值

如何解决获取 ng-content 的原始/原始模板值

是否可以得到ng-content的预处理值？我正在构建设计系统文档，并希望在不重复自己的情况下显示示例代码

html：

<tr>
  <td #contentEl>
    <ng-content #projected></ng-content>
  </td>
  <td>
    <mat-icon (click)="copyTagToClipboard()">content_paste</mat-icon>
  </td>
  <td>
    <pre>{{ contentEl.innerHTML }}</pre>
  </td>
</tr>

打字稿

export class CodeExampleComponent implements OnInit,AfterContentinit {
  @ViewChild('contentEl') contentEl: HTMLTableCellElement;
  @ContentChild('template') template;
  @ViewChild('projected',{ read: TemplateRef,static: true }) content;

  constructor() {}

  ngOnInit() {
    console.log(this.content);
  }

  ngAfterContentinit(): void {
    console.log(this.template);
  }
  
  copyTagToClipboard() {
    if (!this.contentEl) return;
    copyToClipboard(this.contentEl.innerHTML);
  }
}

用法：

  <app-code-example>
    <template #template><app-footnote>Footnote</app-footnote></template>
  </app-code-example>

我所能得到的只是 ng-content/模板的角度渲染内容，而不是原始的原始模板。

解决方法

这不一定能回答您关于从 ng-content 获取预处理 HTML 的问题。但是，此方法可用于解决有关显示 HTML 作为示例的问题。您可以将原始 html 作为字符串导入并将其用作变量。然后我喜欢做的是创建一个或多个组件来演示我正在记录的某个组件的用法。

这有点多，所以我把它们都放在一个 StackBlitz 中来尝试演示。

在 src 目录中创建一个名为 typings.d.ts 的文件，允许我们将 html 文件作为文本导入。

declare module "*.html" {
  const content: string;
  export default content;
}

创建一个我们所有的示例组件都需要实现的抽象类。我们需要它是抽象的，因为我们稍后会使用 QueryList。

export abstract class Example {
  templateText: string; //the raw html to display 
}

创建一个示例包装器组件，显示实时示例、原始 html 并具有复制按钮

import { Component,ContentChildren,Input,QueryList } from "@angular/core";
import { Example } from "../example";

@Component({
  selector: "app-example",template: `
    <div class="wrapper">
        <h1>{{label}}</h1>
        <ng-content></ng-content>
    
        <br />
        <button (click)="copyTagToClipboard()">Copy Content</button>
    
        <div>
            <pre>{{ example.templateText }}</pre>
        </div>
    </div>
  `
})
export class ExampleComponent{
  @Input() label: string; 
  
  @ContentChildren(Example) items: QueryList<Example>;
  example: Example;

  ngAfterContentInit(): void {
    //grab the first thing that implements the "Example" interface
    //hypothetically this component could be re-worked to display multiple examples!
    this.example = this.items.toArray()[0];    
  }

  copyTagToClipboard() {
    alert(this.example.templateText);
  }
}

构建一个组件，演示如何使用您正在记录的任何组件。注意我们如何将html文件作为变量导入，并作为组件的属性使用，满足接口。不要忘记设置提供程序，以便 QueryList 可以选择组件。然后，您可以根据需要构建任意数量的这些示例，每个用例可能构建不同的组件。

import { Component,TemplateRef,ViewChild } from "@angular/core";
import { Example } from "../example";

// See typings.d.ts,which sets up the module that allows us to do this
import * as template from "./my-component-example.component.html";
// or const template = `<app-my-component [label]="myLabelValue"></app-my-component>`;

@Component({
  selector: "app-my-component-example",template,styleUrls: ["./my-component-example.component.css"],//this is so the QueryList works in the example wrapper
  providers: [{ provide: Example,useExisting: MyComponentExampleComponent }]
})
export class MyComponentExampleComponent implements Example {
  myLabelValue = "Test Label!!";
  templateText = template.default;
}

最后，把它们放在一起

<app-example label="Basic Example">
  <app-my-component-example></app-my-component-example>
</app-example>

我觉得通过这种方法，您可以灵活地创建每个示例。