Prism.js 구문을 동적으로 업데이트하는 실용 가이드 각도에서 코드 블록 강조 표시

1. Textarea의 업데이트 메커니즘 : 각도 반응 형태에서 Textarea의 내용은 일반적으로 Formcontrolname을 통해 Formcontrol에 결합됩니다. 구성 요소의 특정 속성 (예 : CurrentCode)을 직접 수정하면 FormControl의 값이 자동으로 업데이트되지 않으므로 TextArea의 디스플레이 내용이 변경되지 않습니다.
2. 요소의 업데이트 : 요소의 내용은 일반적으로 Angular의 보간 ({{currentCode}) 또는 innerHTML 속성에 의해 바릅니다. CurrentCode를 수정하면 Angular의 변경 감지를 트리거하고 <code>의 내용을 업데이트하지만 Prism.js는 기본적으로 DOM 변경을 듣지 않고 자동으로 RE-Highlight를 듣지 않습니다.
3. Prism.js : Prism.highlightall () 메소드의 리치 조명은 강조 해야하는 코드 블록에 대해 전체 문서를 스캔합니다. 이는 동적 로컬 컨텐츠 업데이트를 처리 할 때 비효율적이며 성능 문제를 유발할 수 있습니다.

이러한 문제를 해결하려면 TextRea 및 의 내용을 업데이트하고 Prism.js를 트리거하여 특정 요소를 다시 고정시키는 정확하고 효율적인 방법이 필요합니다.

핵심 솔루션

이 문제를 해결하기위한 열쇠는 두 가지 점에 있습니다. 하나는 Textarea와 관련된 Formcontrol을 올바르게 업데이트하는 것입니다. 다른 하나는 Prism.HighLightElement () 메소드를 사용하여 컨텐츠가 업데이트 된 후 대상 요소를 정확하게 조명하는 것입니다.

1. TextArea 컨텐츠 업데이트 : FormControl.setValue () 사용

Textarea는 반응 형 양식의 Formcontrol에 바인딩되므로 해당 Formcontrol을 통해 그 값을 업데이트해야합니다.

 // 'content'라는 이름의 양식 콘트롤이 있다고 가정합니다.
this.form.get ( 'content')?. setValue (newCodestring);

setValue () 메소드를 사용하여 TextArea가 최신 코드를 표시하는지 확인하십시오. FormControl (루프 업데이트 또는 기타 부작용을 유발할 수 있음)을 업데이트 할 때 실수로 ValueChanges 구독을 트리거하지 않으려면 setValue () 할 때 Emitevent : False 옵션을 전달할 수 있습니다.

 this.form.get ( 'content')?. setValue (newCodestring, {emitevent : false});

2. 하이라이트 코드 블록 : Prism.HighLightElement () 사용

PRISM.HIGHLIGHTEMENTE (Element) 메소드를 사용하면 전체 DOM을 스캔하는 대신 강조 표시를위한 특정 htmlElement를 지정할 수 있습니다. 이것은 코드 블록을 동적으로로드하고 업데이트하는 가장 효율적인 방법입니다.

샘플 코드 (Prismservice의 구현) :

Prism.js의 기능을 더 잘 캡슐화하려면 Prismservice를 만드는 것이 좋습니다.

 // prism.service.ts
'@angular/core'에서 {injectable, elementRef} import;
'Prismjs'에서 Prism으로 가져 오기 *; // prismjs와 해당 언어 패키지 @injectable ({
  제공 : '루트'
})
수출 클래스 프리즘 서비스 {
  생성자 () {}

  /**
   * 전체 문서에서 모든 자격을 갖춘 요소의 구문 하이라스* 참고 : 동적 컨텐츠 업데이트의 경우 HighlowerEment ()를 사용하는 것이 좋습니다.
   */
  하이라이트 () : void {
    prism.highlightall ();
  }

  /**
   * 지정된 HTML 요소의 구문 강조 표시* @param 요소 HtmlElement가 강조 표시됩니다.
   */
  Highlowlement (요소 : htmlelement) : void {
    if (요소) {
      Prism.HighlightElement (요소);
    }
  }

  /**
   * 예 : HTML 엔티티를 다시 문자열로 변환 (필요한 경우)
   * @param htmlcontent 문자열 HTML 엔티티를 포함하는 문자열* @returns 변환 문자열*/
  converthtmlintoString (htmlContent : String) : String {
    const doc = new domparser (). parsefromstring (htmlcontent, 'text/html');
    Doc.DocumentElement.TextContent ||를 반환합니다 '';;
  }
}

구성 요소에서는 this.prismservice.highlightlement (this.codecontent.nativeElement)를 호출합니다. 특정 요소를 강조합니다.

각도 구성 요소의 통합

이제 위의 솔루션을 각도 구성 요소에 통합합니다. 핵심 아이디어는 데이터를로드하고 구성 요소 속성을 업데이트 한 후 FormControl을 즉시 업데이트하고 Prism.HighLightElement ()를 트리거하는 것입니다.

먼저 구성 요소가 TextRea 및 요소를 참조 할 수 있는지 확인하십시오.

 // display-sourcecode.component.ts
'@Angular/Core'에서 import {구성 요소, OnInit, AfterViewChed, ViewChild, ElementRef, Renderer2, OnDestroy};
'@angular/forms'에서 {formbuilder, formgroup} import;
'rxjs'에서 {subscription, fromevent} 가져 오기;
'./prism.service'에서 {prismservice} 가져 오기; // Prismservice 경로가 정확하다고 가정합니다 @component ({
  선택기 : 'app-display-sourcecode',
  TemplateUrl : './display-sourcecode.component.html',
  styleurls : [ './display-sourcecode.component.css']
})
내보내기 클래스 DisplaySourceCodeComponent는 OnInit, afterViewChecked, OnDestroy {를 구현합니다.
  codelist : 모든 [] = [];
  currentCode : String = "";
  코드 타입 : String = 'java'; // 기본 코드 유형 양식 : FormGroup;

  @ViewChild ( 'textArea', {static : true})
  TextRea! : ElementRef <htmltextareaelement>;
  @ViewChild ( 'CodeContent', {static : true})
  CodeContent! : ElementRef <htmlelement>; // htmlelement 유형 private sub! : 구독;

  건설자(
    개인 Prismservice : Prismservice,
    개인 FB : Formbuilder,
    개인 렌더러 : Renderer2
  ) {
    this.form = this.fb.group ({{
      콘텐츠: ['']
    });
  }

  contentcontrol () {{{
    reture this.form.get ( 'content');
  }

  ngoninit () : void {
    this.listenform ();
    // data를로드하는 loadSourceCodes 메소드가 있다고 가정합니다. // this.loadSourceCodes ();
  }

  ngafterViewChecked () : void {
    // 특정 이벤트에서 HighlowerEment ()에게 호출되므로 여기에서 Highterall ()을 제거하거나 단순화하십시오.
    // 글로벌 하이라이트가 필요한 다른 요구 사항이 없으면이 메소드를 삭제하거나 비워 둘 수 있습니다.}

  ngondestroy () : void {
    this.sub? .unsubscribe ();
  }

  /**
   * 새 코드가 데이터베이스에서로드되었을 때 호출되어 코드 컨텐츠를 포함하는 * @param 항목 {code : "public class myclass {}"}.
   */
  DisplaySourcEcode (항목 : ahone) : void {
    const newcode = item.code;

    // 1. FormControl의 값을 업데이트하면 <textrea>를 업데이트합니다.
    // {Emitevent : False} 사용 ListenForm Subscription을 방지하지 않으려면
    // 아래의 <code> 요소를 수동으로 업데이트하고 강조 표시하기 때문에.
    this.contentControl? .setValue (newCode, {emitevent : false});

    // 2. <code> 요소의 내용을 직접 업데이트 // renderer2를 사용하여 DOM을 안전하게 작동하십시오.
    this.renderer.setProperty (this.codecontent.nativeElement, 'InnerHtml', newCode);

    // 3. 트리거 프리즘 .js는 특정 <code> 요소를 강조하기위한 트리거 프리즘.
    // settimeout (..., 0) 또는 promise.resolve ()를 사용하여 마이크로 스스크 큐에 넣을 수 있습니다.
    // 대부분의 경우 직접 통화도 작동 할 수 있지만 마이크로 마스크는 더 강력합니다.
    settimeout (() => {
      this.prismservice.highlightlement (this.codecontent.nativeElement);
    }, 0);
  }

  /**
   * 사용자가 수동으로 TextArea에 입력 할 때 주로 사용되는 양식 컨텐츠의 변경 사항을 듣습니다.*/
  private listenform () : void {
    this.sub = this.form.valuechanges.subscribe ((val) => {
      const modifiedcontent = this.prismservice.converthtmlintostring (val.content);
      this.renderer.setProperty (this.codecontent.nativeElement, 'InnerHtml', modifiedContent);

      // 사용자가 입력하면 현재 <code> 요소도 직접 강조 표시됩니다. settimeout (() => {
        this.prismservice.highlightlement (this.codecontent.nativeElement);
      }, 0);
    });
  }

  // 여기에 보존 된 원본 스크롤 동기화 로직 // @ViewChild ( 'pre', {static : true}) pre! : elementRef; // <pre class="brush:php;toolbar:false"> 요소 // private synchronizescroll () {가 있다고 가정합니다.
  // const localsub = fromevent (this.textArea.nativeElement, 'scroll'). 구독 (() => {
  // const totop = this.textArea.nativeElement.scrolltop;
  // const toleft = this.textArea.nativeElement.scrollleft;
  // this.renderer.setProperty (this.pre.nativeElement, 'scrolltop', totop);
  // this.renderer.setProperty (this.pre.nativeElement, 'scrollleft', Toleft 0.2);
  //});
  // this.sub.add (localsub);
  //}
}

해당 HTML 템플릿 (display-sourcecode.component.html) :

 
  <div class="Code-Container line-numbers">
    <textarea formcontrolname="Content">/textRea>
    를 직접 제어합니다.
    <code> </code>
  </textarea>
</div>

주요 수정 지점 요약 :

1. displaysourcecode 메소드 :
   • this.contentControl? .setValue (newCode, {emitevent : false}); Textarea의 가치를 업데이트합니다.
   • this.renderer.setProperty (this.codecontent.nativeElement, 'InnerHtml', newCode); 요소의 내용을 직접 업데이트하려면
   • 내용이 업데이트 된 후에는 this.prismservice.highlightelement (this.codecontent.nativeElement)로 전화하십시오. 리이트 라이트로. Settimeout (..., 0)을 사용하여 강조 표시하기 전에 DOM이 업데이트되도록하십시오.
2. ListenForm Method :
   • ValueChanges 구독은 사용자가 Textarea에 입력하면 해고됩니다.
   • 마찬가지로 의 내부를 업데이트 한 후 직접 전화하십시오 .prismservice.highlightlement (this.codecontent.nativeElement); 강조 표시.
3. ngafterViewChecked 메소드 :
   • 이 메소드가 Prismservice.highlightall ()을 호출하는 데만 사용되는 경우 Highlowlement ()를 사용하여보다 정확한 하이라이트 컨트롤을 구현 했으므로 제거하거나 지울 수 있습니다.
4. HTML 템플릿 :
   • 내용은 renderer.setProperty 또는 innerHTML을 통해 구성 요소 로직에 의해 직접 설정되므로 요소에서 {{currentCode}} 바인딩을 제거하십시오.

메모 및 모범 사례

• 성능 최적화 : 특히 동적 컨텐츠 시나리오에서 Prism.highlightall ()을 통해 항상 Prism.highlightlement ()를 사용하십시오. Highterall ()은 전체 DOM을 가로 질러 비싸다.
• DOM 요소 참조 : Viewchild가 요소를 올바르게 가져 오도록하십시오. 요소가 NGIF와 같은 조건부 렌더링에있는 경우 NGAFTERVIEWINIT 또는 NGAFTERVIEWCHECKED의 존재를 확인해야 할 수도 있습니다.
• 비동기 데이터 처리 : API 또는 데이터베이스에서 데이터를로드 할 때 데이터를 성공적으로 획득하고 구성 요소 상태를 업데이트 한 후 DisplaySourceCode와 같은 메소드를 수행하여 UI 및 트리거 강조 표시를 수행해야합니다.
• 오류 처리 : prismservice.highlightlement ()를 호출하기 전에 잠재적 인 런타임 오류를 피하기 위해 this.codecontent.nativeElement가 존재하는지 확인하는 것이 가장 좋습니다.

위 내용은 Prism.js 구문을 동적으로 업데이트하는 실용 가이드 각도에서 코드 블록 강조 표시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!