क्या ng-content का पूर्व-संसाधित मान प्राप्त करना संभव है? मैं डिज़ाइन-सिस्टम दस्तावेज़ बना रहा हूं और खुद को दोहराए बिना उदाहरण कोड प्रदर्शित करना चाहता हूं

एचटीएमएल:

<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>

मैं जो कुछ भी प्राप्त कर सकता हूं वह एनजी-सामग्री/टेम्पलेट की कोणीय प्रदान की गई सामग्री है, न कि मूल कच्चे टेम्पलेट।

1
jenson-button-event 9 जिंदा 2021, 20:05

1 उत्तर

सबसे बढ़िया उत्तर

यह आवश्यक रूप से ng-content से पूर्व-संसाधित HTML प्राप्त करने के बारे में आपके प्रश्न का उत्तर नहीं देता है। हालाँकि इस दृष्टिकोण का उपयोग HTML को एक उदाहरण के रूप में प्रदर्शित करने के बारे में आपकी समस्या को हल करने के लिए किया जा सकता है। आप कच्चे html को एक स्ट्रिंग के रूप में आयात कर सकते हैं और इसे एक चर के रूप में उपयोग कर सकते हैं। मैं जो करना चाहता हूं वह एक घटक या एकाधिक घटक बनाना है जो मेरे द्वारा दस्तावेज किए जा रहे कुछ घटक के उपयोग को प्रदर्शित करता है।

यह बहुत कुछ है, इसलिए मैंने इसे स्टैकब्लिट्ज कोशिश करने और प्रदर्शित करने के लिए।

सीधे 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>

मुझे लगता है कि इस दृष्टिकोण के साथ आप में बहुत लचीलापन है कि प्रत्येक उदाहरण कैसे बनाएं।

2
jenson-button-event 10 जिंदा 2021, 11:44
यह सरल है। संक्षिप्तता के लिए ध्यान देने योग्य हम my-component-example.component.html को एक स्थिर स्ट्रिंग में रख सकते हैं।
 – 
jenson-button-event
10 जिंदा 2021, 11:29