කෝණික HTML බන්ධනය

මම කෝණික යෙදුමක් ලියන අතර මට පෙන්වීමට අවශ්‍ය HTML ප්‍රතිචාරයක් ඇත.

මම කොහොමද ඒක කරන්නේ? මම සරලවම බන්ධන සින්ටැක්ස් භාවිතා කරන්නේ නම් {{myVal}}එය සියලු HTML අක්ෂර සංකේතවත් කරයි (ඇත්ත වශයෙන්ම).

innerHTMLA divහි විචල්‍ය අගයට බැඳීමට මට කෙසේ හෝ අවශ්‍යයි .

නිවැරදි වාක්‍ය ඛණ්ඩය පහත දැක්වේ:

<div [innerHTML]="theHtmlString"></div>

ප්‍රලේඛන යොමුව

තවමත් අනුවාදයේ වැඩ කරයි 10.0.9

කෝණික 2.0.0 සහ කෝණික 4.0.0 අවසන්

ආරක්ෂිත අන්තර්ගතයන් සඳහා පමණි

<div [innerHTML]="myVal"></div>

DOMSanitizer

විභව අනාරක්ෂිත HTML විශ්වාසදායක ලෙස Angulars DOM සනීපාරක්ෂක භාවිතයෙන් පැහැදිලිව සලකුණු කළ යුතු අතර එමඟින් අන්තර්ගතයේ අනාරක්ෂිත කොටස් ඉවත් නොකෙරේ

<div [innerHTML]="myVal | safeHtml"></div>

වැනි පයිප්පයක් සමඟ

@Pipe({name: 'safeHtml'})
export class Safe {
  constructor(private sanitizer:DomSanitizer){}

  transform(style) {
    return this.sanitizer.bypassSecurityTrustHtml(style);
    //return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs
  }
}

RC.1 හි ද බලන්න බන්ධන සින්ටැක්ස් භාවිතයෙන් සමහර මෝස්තර එකතු කළ නොහැක

සහ ලියකියවිලි: https://angular.io/api/platform-browser/DomSanitizer

ආරක්ෂක අනතුරු ඇඟවීම

පරිශීලක එකතු කළ HTML විශ්වාස කිරීම ආරක්ෂිත අවදානමක් ඇති කරයි. කලින් සඳහන් කළ ලියකියවිලි වල මෙසේ සඳහන් වේ:

ඕනෑම bypassSecurityTrust...ඒපීඅයි එකක් ඇමතීමෙන් ලබා දුන් අගය සඳහා කෝණිකයේ සනීපාරක්ෂාව අක්‍රීය කරයි. මෙම ඇමතුමට යන සියලු අගයන් සහ කේත මාර්ග ප්‍රවේශමෙන් පරීක්ෂා කර විගණනය කරන්න. මෙම ආරක්ෂක සන්දර්භය සඳහා ඕනෑම පරිශීලක දත්ත සුදුසු පරිදි ගැලවී ඇති බවට වග බලා ගන්න. වැඩි විස්තර සඳහා ආරක්ෂක මාර්ගෝපදේශය බලන්න .

කෝණික සලකුණු කිරීම

වගේ දෙයක්

class FooComponent {
  bar = 'bar';
  foo = `<div>{{bar}}</div>
    <my-comp></my-comp>
    <input [(ngModel)]="bar">`;

සමග

<div [innerHTML]="foo"></div>

කෝණික විශේෂිත කිසිවක් සැකසීමට කෝණික හේතු නොවේfoo . කෝණික නිශ්චිත සලකුණු කිරීම ගොඩනැගීමේ වේලාවේදී උත්පාදනය කළ කේතය සමඟ ප්‍රතිස්ථාපනය කරයි. ධාවන වේලාවට එකතු කළ සලකුණු කෝණික මඟින් සැකසෙන්නේ නැත .

කෝණික විශේෂිත සලකුණු (දේපල හෝ අගය බන්ධනය, සංරචක, විධානයන්, පයිප්ප, ...) අඩංගු HTML එකතු කිරීම සඳහා ගතික මොඩියුලය එකතු කිරීම සහ ධාවන වේලාවේදී සංරචක සම්පාදනය කිරීම අවශ්‍ය වේ. මෙම පිළිතුර වැඩි විස්තර සපයයි කෝණික 2.0 සමඟ ගතික සංරචකය සම්පාදනය කිරීමට ගතික අච්චුවක් භාවිතා කරන්නේ කෙසේද?

[innerHtml] බොහෝ අවස්ථාවන්හීදී එය හොඳ විකල්පයකි, නමුත් එය විශාල නූල් සමඟ අසමත් වේ හෝ ඔබට html හි දෘඩ කේත මෝස්තර අවශ්‍ය වූ විට.

මම වෙනත් ප්‍රවේශයක් බෙදා ගැනීමට කැමතියි:

ඔබ කළ යුත්තේ ඔබේ HTML ගොනුවේ div එකක් සාදා එයට යම් හැඳුනුම්පතක් ලබා දීම පමණි:

<div #dataContainer></div>

ඉන්පසු, ඔබේ කෝණික 2 සංරචකය තුළ, මෙම වස්තුව වෙත යොමු කිරීමක් සාදන්න (මෙහි TypeScript):

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
    templateUrl: "some html file"
})
export class MainPageComponent {

    @ViewChild('dataContainer') dataContainer: ElementRef;

    loadData(data) {
        this.dataContainer.nativeElement.innerHTML = data;
    }
}

loadDataHTML මූලද්‍රව්‍යයට යම් පෙළක් එකතු කිරීමට ශ්‍රිතය භාවිතා කරන්න.

එය ස්වදේශීය ජාවාස්ක්‍රිප්ට් භාවිතයෙන් ඔබ කළ හැකි ක්‍රමයක් පමණි, නමුත් කෝණික පරිසරය තුළ. මම එය නිර්දේශ නොකරමි, මන්ද කේතය වඩාත් අවුල් සහගත වන නමුත් සමහර විට වෙනත් විකල්පයක් නොමැත.

කෝණික 2 - අභ්‍යන්තර HTML මෝස්තරයද බලන්න

Angular2@2.0.0-alpha.44 මත:

භාවිතා කරන විට Html-Binding ක්‍රියා නොකරනු ඇත {{interpolation}}, ඒ වෙනුවට “ප්‍රකාශනයක්” භාවිතා කරන්න:

අවලංගුයි

<p [innerHTML]="{{item.anleser}}"></p>

-> දෝෂයක් විසි කරයි (අපේක්ෂිත ප්‍රකාශනය වෙනුවට අන්තර් මැදිහත්වීම)

නිවැරදි

<p [innerHTML]="item.anleser"></p>

-> මෙය නිවැරදි ක්‍රමයයි.

ඔබට ප්‍රකාශනයට අමතර අංග එකතු කළ හැකිය, වැනි:

<p [innerHTML]="'<b>'+item.anleser+'</b>'"></p>

ඉඟිය

භාවිතයෙන් [innerHTML]එකතු කරන ලද HTML (හෝ වෙනත් element.appenChild()හෝ සමාන හෝ වෙනත් ආකාරයකින් ගතිකව එකතු කරනු ලැබේ ) ආරක්‍ෂිත අරමුණු සඳහා සනීපාරක්ෂාව හැර වෙනත් ආකාරයකින් කෝණික විසින් ක්‍රියාවට නංවනු නොලැබේ.
එවැනි දේවල් ක්‍රියාත්මක වන්නේ සංරචක අච්චුවකට HTML ස්ථිතිකව එකතු කළ විට පමණි. ඔබට මෙය අවශ්‍ය නම්, ක්‍රියාකාරී වේලාවේදී ඔබට සං component ටකයක් සෑදිය හැකිය විස්තර කර ඇති ආකාරයට කෝණික 2.0 සමඟ ගතික සංරචකය සම්පාදනය කිරීමට ගතික අච්චුවක් භාවිතා කරන්නේ කෙසේද?

Angular's DOM සනීපාරක්ෂක භාවිතා නොකර සෘජුවම [අභ්‍යන්තර HTML] භාවිතා කිරීම විකල්පයක් නොවේ. Answer GönterZöchbauer විසින් ඔහුගේ පිළිතුරෙන් යෝජනා කරන ලද ආරක්ෂිත HTML නළය අන්තර්ගතය සනීපාරක්ෂාව කිරීමේ එක් ක්‍රමයකි. පහත දැක්වෙන නියෝගය තවත් එකකි:

import { Directive, ElementRef, Input, OnChanges, Sanitizer, SecurityContext,
  SimpleChanges } from '@angular/core';

// Sets the element's innerHTML to a sanitized version of [safeHtml]
@Directive({ selector: '[safeHtml]' })
export class HtmlDirective implements OnChanges {
  @Input() safeHtml: string;

  constructor(private elementRef: ElementRef, private sanitizer: Sanitizer) {}

  ngOnChanges(changes: SimpleChanges): any {
    if ('safeHtml' in changes) {
      this.elementRef.nativeElement.innerHTML =
        this.sanitizer.sanitize(SecurityContext.HTML, this.safeHtml);
    }
  }
}

භාවිතා කිරීමට

<div [safeHtml]="myVal"></div>

කරුණාකර වඩාත් යාවත්කාලීන වෙනත් පිළිතුරු වෙත යොමු වන්න.

මෙය මට <div innerHTML = "{{ myVal }}"></div>ප්‍රයෝජනවත් වේ : (කෝණික 2, ඇල්ෆා 33)

තවත් SO ට අනුව: HTML සේවාදායකයෙන් DOM වෙත කෝණික 2 සමඟ ඇතුළත් කිරීම (කෝණික 2 හි සාමාන්‍ය DOM හැසිරවීම) , “අභ්‍යන්තර- html” කෝණික 1.X හි “ng-bind-html” ට සමාන වේ.

මෙහි කාරණය මග හැරී ඇත්නම් මම සමාව ඉල්ලමි, නමුත් වෙනස් ප්‍රවේශයක් නිර්දේශ කිරීමට මම කැමැත්තෙමි:

ඔබේ සේවාදායක පාර්ශවීය යෙදුමෙන් අමු දත්ත ආපසු ලබා දීම සහ සේවාදායකයාගේ පැත්තේ අච්චුවකට බැඳ තැබීම වඩා හොඳ යැයි මම සිතමි. ඔබ ඔබේ සේවාදායකයෙන් json පමණක් ආපසු ලබා දෙන බැවින් මෙය වඩාත් වේගවත් ඉල්ලීම් සඳහා හේතු වේ.

මට පෙනෙන පරිදි ඔබ කරන්නේ සර්වරයෙන් HTML ලබාගෙන එය DOM තුළට එන්නත් කිරීම නම් කෝණික භාවිතා කිරීම අර්ථවත් බවක් නොවේ.

මම දන්නවා Angular 1.x හි html බන්ධනයක් ඇති නමුත් මම තවමත් Angular 2.0 හි ප්‍රතිවිරුද්ධ පාර්ශවයක් දැක නැත. ඔවුන් පසුව එය එකතු කළ හැකිය. කෙසේ වෙතත්, මම තවමත් ඔබගේ කෝණික 2.0 යෙදුම සඳහා දත්ත api සලකා බලමි.

ඔබ කැමති නම් සරල දත්ත බන්ධනයක් සහිත සාම්පල කිහිපයක් මා සතුව ඇත: http://www.syntaxsuccess.com/viewarticle/angular-2.0- උදාහරණ

සම්පූර්ණ පිළිතුරක් ලබා ගැනීම සඳහා, ඔබේ HTML අන්තර්ගතය සංරචක විචල්‍යයක තිබේ නම්, ඔබට මෙයද භාවිතා කළ හැකිය:

<div [innerHTML]=componementVariableThatHasTheHtml></div>

කෙටි පිළිතුර දැනටමත් මෙහි ලබා දී ඇත: <div [innerHTML]="yourHtml">බන්ධනය භාවිතා කරන්න .

කෙසේ වෙතත් මෙහි සඳහන් ඉතිරි උපදෙස් නොමඟ යවන සුළු විය හැකිය. ඔබ එවැනි දේපල සමඟ බැඳී සිටින විට කෝණික තුළ සනීපාරක්ෂක යාන්ත්‍රණයක් ඇත. කෝණික යනු කැපවූ සනීපාරක්ෂක පුස්තකාලයක් නොවන බැවින්, කිසිදු අවදානමක් නොගැනීම සැක සහිත අන්තර්ගතයන් කෙරෙහි අධික ලෙස බලපායි. උදාහරණයක් ලෙස, එය සියළුම SVG අන්තර්ගතයන් හිස් නූලකට පිරිසිදු කරයි.

ක්‍රම DomSanitizerසමඟ අන්තර්ගතය ආරක්ෂිත යැයි සලකුණු කිරීම මගින් ඔබේ අන්තර්ගතය "සනීපාරක්ෂාව" කිරීමට ඔබට උපදෙස් ඇසෙනු bypassSecurityTrustXXXඇත. ඒ සඳහා පයිප්ප භාවිතා කිරීමට යෝජනා ද ඇති අතර එම නළය බොහෝ විට හැඳින්වේ safeHtml.

මේ සියල්ල නොමඟ යවන සුළු කරුණක් වන්නේ එය ඇත්ත වශයෙන්ම සනීපාරක්ෂාව මග හැරීම මිස ඔබේ අන්තර්ගතය සනීපාරක්ෂාව නොකිරීමයි. මෙය ආරක්‍ෂිත කාරණයක් විය හැකිය, මන්ද ඔබ මෙය කවදා හෝ පරිශීලක විසින් සපයන ලද අන්තර්ගතයන් මත හෝ ඔබට විශ්වාස නැති දෙයක් මත සිදු කරන්නේ නම් - ඔබ අනිෂ්ට කේත ප්‍රහාරයකට විවෘත වේ.

කෝණික විසින් එහි ඇති සනීපාරක්ෂාව මගින් ඔබට අවශ්‍ය දෙයක් ඉවත් කරන්නේ නම් - එය අක්‍රීය කිරීම වෙනුවට ඔබට කළ හැකි දෙය නම්, එම කාර්යයේ දී හොඳ පුස්තකාලයක් වෙත සත්‍ය සනීපාරක්ෂාව පැවරීමයි. උදාහරණයක් ලෙස - DOMPurify.

කෝණික: https://github.com/TinkoffCreditSystems/ng-dompurify සමඟ පහසුවෙන් භාවිතා කළ හැකි වන පරිදි මම ඒ සඳහා රැප් පුස්තකාලයක් සාදා ඇත.

HTML ප්‍රකාශිත ලෙස සනීපාරක්ෂාව සඳහා නලයක් ද එහි ඇත:

<div [innerHtml]="value | dompurify"></div>

මෙහි යෝජනා කර ඇති පයිප්පවල වෙනස නම් එය සැබවින්ම DOMPurify හරහා සනීපාරක්ෂාව සිදු කරන අතර එම නිසා SVG සඳහා වැඩ කිරීමයි.

මතක තබා ගත යුතු එක් දෙයක් නම් HTML / SVG සනීපාරක්ෂාව සඳහා DOMPurify විශිෂ්ටයි, නමුත් CSS නොවේ. එබැවින් ඔබට CSS හැසිරවීමට Angular හි CSS සනීපාරක්ෂක සැපයුම්කරු සැපයිය හැකිය:

import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
import {SANITIZE_STYLE} from '@tinkoff/ng-dompurify';

@NgModule({
    // ...
    providers: [
        {
            provide: SANITIZE_STYLE,
            useValue: ɵ_sanitizeStyle,
        },
    ],
    // ...
})
export class AppModule {}

එය අභ්‍යන්තර - හෙන්ස් ɵඋපසර්ගය, නමුත් කෝණික කණ්ඩායම එය ඔවුන්ගේම පැකේජ හරහා මෙන්ම කෙසේ හෝ භාවිතා කරයි. එම පුස්තකාලය කෝණික විශ්ව සහ සේවාදායක පැති ප්‍රතිනිර්මාණය කිරීමේ පරිසරය සඳහා ද ක්‍රියා කරයි.

පහත දැක්වෙන දෙයක් [innerHTML]ඔබගේ HTML හි ඇති ගුණාංගය භාවිතා කරන්න :

<div [innerHTML]="myVal"></div>

ඔබේ සංරචකයේ කිසියම් HTML සලකුණු කිරීමක් හෝ ඔබේ අච්චුව තුළ පෙන්විය යුතු ආයතන අඩංගු ගුණාංග තිබේද? සාම්ප්‍රදායික අන්තර් මැදිහත්වීම ක්‍රියා නොකරනු ඇත, නමුත් අභ්‍යන්තර HTML දේපල බන්ධනය ගලවා ගැනීමට පැමිණේ.

භාවිතා කිරීම අපේක්ෂිත පරිදි {{myVal}} ක්‍රියා නොකරයි ! මෙම නොකරන මෙන් HTML ටැග් ගන්න <p>, <strong>ආදිය පමණක් නූල් ලෙස සමත් ...

ඔබේ සංරචකයේ මෙම කේතය ඇති බව සිතන්න:

const myVal:string ='<strong>Stackoverflow</strong> is <em>helpful!</em>'

ඔබ භාවිතා කරන්නේ නම් {{myVal}}, ඔබට මෙය දර්ශනයෙන් ලැබෙනු ඇත:

<strong>Stackoverflow</strong> is <em>helpful!</em>

නමුත් භාවිතා කිරීමෙන් [innerHTML]="myVal"ප්‍රති result ලය මේ ආකාරයට බලාපොරොත්තු වේ:

Stackoverflow වේ ප්රයෝජනවත්!

 <div [innerHTML]="HtmlPrint"></div><br>

අභ්‍යන්තර HTML යනු HTML-Elements හි දේපලකි, එය ඔබට HTML අන්තර්ගතය ක්‍රමලේඛනය ලෙස සැකසීමට ඉඩ දෙයි. අන්තර්ගතය සරල පෙළ ලෙස අර්ථ දක්වන අභ්‍යන්තර ටෙක්ස්ට් දේපලක් ද ඇත.

මෙම [attributeName]="value"ආරෝපණය අවට කොටුව වරහන, ෙකෝණික ආදාන-බන්ධන නිර්වචනය කරයි. එයින් අදහස් වන්නේ, දේපලෙහි වටිනාකම (ඔබේ නඩුවේ අභ්‍යන්තර HTML) දී ඇති ප්‍රකාශනයට බැඳී ඇති බවයි, ප්‍රකාශන-ප්‍රති result ලය වෙනස් වන විට, දේපල වටිනාකම ද වෙනස් වේ.

එබැවින් මූලික වශයෙන් [innerHtml]ඔබට ලබා දී ඇති HTML-Element හි html- කේතය බන්ධනය කිරීමට හා ගතිකව වෙනස් කිරීමට ඉඩ ලබා දේ.

දී ෙකෝණික 2 ඔබ සබඳතා වර්ග 3 කළ හැකිය:

• [property]="expression"-> ඕනෑම html දේපලකට
  ප්‍රකාශනයකට සම්බන්ධ විය හැකිය . මෙම අවස්ථාවේදී, ප්‍රකාශනය වෙනස් වුවහොත් දේපල යාවත්කාලීන වේ, නමුත් මෙය වෙනත් ආකාරයකින් ක්‍රියා නොකරයි.
• (event)="expression" -> සිදුවීම ක්‍රියාත්මක වන විට ප්‍රකාශනය ක්‍රියාත්මක කරන්න.
• [(ngModel)]="property"-> දේපල js (හෝ ts) සිට html දක්වා බන්ධනය කරයි. මෙම දේපල පිළිබඳ ඕනෑම යාවත්කාලීන කිරීමක් සෑම තැනකම දක්නට ලැබේ.

ප්‍රකාශනයක් වටිනාකමක්, ලක්ෂණයක් හෝ ක්‍රමයක් විය හැකිය. උදාහරණයක් ලෙස: '4', 'controller.var', 'getValue ()'

මෙහි උදාහරණය

.Html හි පහත පරිදි ඔබට ශෛලිය, සබැඳිය සහ HTML සඳහා බහු පයිප්පයක් යෙදිය හැකිය

<div [innerHTML]="announcementContent | safeUrl| safeHtml">
                    </div>

සහ .ts පයිප්පයේ 'URL' සනීපාරක්ෂක සඳහා

import { Component, Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({ name: 'safeUrl' })
export class SafeUrlPipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) {}
    transform(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

'HTML' සනීපාරක්ෂක සඳහා නළය

import { Component, Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
    name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) {}
    transform(value) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

මෙය කිසිදු ශෛලියකට සහ සම්බන්ධක ක්ලික් කිරීමේ සිදුවීමකට බාධා නොකර දෙකම අදාළ වේ

පහත දැක්වෙන පරිදි කැනොනිකල් ස්වරූපයෙන් ඔබට කෝණික සංරචක පන්ති ගුණාංග අච්චුව සමඟ බැඳිය හැකිය:

<div bind-innerHTML="theHtmlString"></div>

කෝණික ප්‍රලේඛනය: https://angular.io/guide/template-syntax#property-binding-property

වැඩ කරන ස්ටැක්බ්ලිට්ස් උදාහරණය මෙතැනින් බලන්න

කෝණික 2 ලේඛනයේ විස්තර කර ඇති පරිදි DOM වෙත මූලද්‍රව්‍ය ගතිකව එකතු කිරීමේ ක්‍රමය වන්නේ @ කෝණික / හරයෙන් ViewContainerRef පන්තිය භාවිතා කිරීමයි.

ඔබ කළ යුතුව ඇත්තේ ViewContainerRef ක්‍රියාත්මක කරන නියෝගයක් ප්‍රකාශ කිරීම සහ ඔබේ DOM හි ස්ථාන දරන්නෙකු ලෙස ක්‍රියා කිරීමයි.

විධානය

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appInject]'
})
export class InjectDirective {

  constructor(public viewContainerRef: ViewContainerRef) { }

}

ඉන්පසුව, ඔබට සංරචකය එන්නත් කිරීමට අවශ්‍ය අච්චුවේ:

HTML

<div class="where_you_want_to_inject">    
  <ng-template appInject></ng-template>
</div>

ඉන්ජෙක්ෂන් සංරචක කේතයෙන්, ඔබට අවශ්‍ය HTML අඩංගු සංරචකය එන්නත් කරනු ලැබේ:

import { Component, OnInit, ViewChild, ComponentFactoryResolver } from '@angular/core';
import { InjectDirective } from '../inject.directive';
import { InjectedComponent } from '../injected/injected.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  @ViewChild(InjectDirective) injectComp: InjectDirective;

  constructor(private _componentFactoryResolver: ComponentFactoryResolver) {
  }

  ngOnInit() {
  }

  public addComp() {
    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(InjectedComponent);
    const viewContainerRef = this.injectComp.viewContainerRef;
    const componentRef = viewContainerRef.createComponent(componentFactory);
  }

  public removeComp() {
    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(InjectedComponent);
    const viewContainerRef = this.injectComp.viewContainerRef;
    const componentRef = viewContainerRef.remove();
  }

}

මම කෝණික 2 හි සම්පුර්ණයෙන්ම වැඩ කරන ආදර්ශන යෙදුමක් DOM නිරූපණයට ගතිකව එකතු කළෙමි

විසඳුම සාක්ෂාත් කර ගැනීම සඳහා ඔබට ප්රවේශයන් කිහිපයක් භාවිතා කළ හැකිය. අනුමත පිළිතුරෙහි දැනටමත් පවසා ඇති පරිදි, ඔබට මෙය භාවිතා කළ හැකිය:

<div [innerHTML]="myVal"></div>

ඔබ සාක්ෂාත් කර ගැනීමට උත්සාහ කරන දේ මත පදනම්ව, ඔබට javascript DOM වැනි වෙනත් දේද උත්සාහ කළ හැකිය (නිර්දේශ නොකරයි, DOM මෙහෙයුම් මන්දගාමී වේ):

ඉදිරිපත් කිරීම

<div id="test"></test>

සංරචකය

var p = document.getElementsById("test");
p.outerHTML = myVal;

දේපල බන්ධනය

Javascript DOM පිටත HTML

innerHTMLHtml ගතික අන්තර්ගතයන් ලබා දීම සඳහා අපට සෑම විටම html අන්තර්ගතය දේපල වෙත යැවිය හැකි නමුත් එම ගතික HTML අන්තර්ගතය ආසාදනය හෝ අනිෂ්ට විය හැකිය. එබැවින් ගතික අන්තර්ගතයන් වෙත යැවීමට පෙර innerHTMLඅපි සෑම විටම DOMSanitizerඅනිෂ්ට අන්තර්ගතයන්ගෙන් ගැලවීමට හැකි වන පරිදි අන්තර්ගතය සනීපාරක්ෂක (භාවිතා කරමින් ) බවට වග බලා ගත යුතුය .

පයිප්පයට පහළින් උත්සාහ කරන්න:

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";

@Pipe({name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) {
    }
    transform(value: string) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

Usage:
<div [innerHTML]="content | safeHtml"></div>

ඔබට එය කෝණික 2 හෝ කෝණික 4 හි අවශ්‍ය නම් සහ පේළිගත CSS තබා ගැනීමට අවශ්‍ය නම් ඔබට භාවිතා කළ හැකිය

<div [innerHTML]="theHtmlString | keepHtml"></div>

කෝණික v2.1.1 හි වැඩ කිරීම

<div [innerHTML]="variable or htmlString">
</div>

මේ දක්වා ඇති සියලුම විශිෂ්ට පිළිතුරු සඳහා කුඩා එකතු කිරීමක් පළ කිරීම සඳහා: ඔබ [innerHTML]කෝණික සංරචක ඉදිරිපත් කිරීමට භාවිතා කරන්නේ නම් සහ එය මා මෙන් ක්‍රියා නොකරන්නේ නම්, මෙය විසඳීමට මා ලියූ ngx- ගතික-කොකු පුස්තකාලය දෙස බලන්න. නිකුත් කිරීම.

එය සමඟ, ඔබට ආරක්ෂාව පාවා නොදී ගතික නූල් / html වෙතින් සංරචක පැටවිය හැකිය . එය ඇත්ත වශයෙන්ම කෝණික භාවිතා කරන DOMSanitizerආකාරයටම භාවිතා කරයි [innerHTML], නමුත් සංරචක පැටවීමේ හැකියාව රඳවා ගනී (ආරක්ෂිත ආකාරයකින්).

මෙම ස්ටැක්බ්ලිට්ස් හි එය ක්‍රියාකාරීව බලන්න .

ඔබේ කෝණික (හෝ ඕනෑම රාමුවක්) යෙදුමේ ඔබට සැකිලි තිබේ නම්, සහ ඔබ HTTP ඉල්ලීමක් / ප්‍රතිචාරයක් හරහා ඔබේ පසුබිමෙන් HTML සැකිලි ආපසු එවන්නේ නම්, ඔබ ඉදිරිපස සහ පසුබිම අතර සැකිලි මිශ්‍ර කරයි.

සැකසීමේ දේවල් ඉදිරිපස කොටසෙහි (මම එය යෝජනා කරමි) හෝ පසුපෙළේ (තරමක් විනිවිද පෙනෙන ඉමෝ) තබන්නේ නැත්තේ ඇයි?

ඔබ අච්චු පෙරමුනේ තබා ගන්නේ නම්, පසුපසට ඉල්ලීම් සඳහා JSON සමඟ පමණක් ප්‍රතිචාර නොදක්වන්න. ඔබට RESTful ව්‍යුහයක් ක්‍රියාත්මක කිරීමට පවා අවශ්‍ය නැත, නමුත් සැකිලි එක් පැත්තක තබා ගැනීමෙන් ඔබේ කේතය වඩාත් විනිවිද පෙනෙන වේ.

වෙනත් අයෙකුට ඔබේ කේතය සමඟ කටයුතු කිරීමට සිදු වූ විට (හෝ ඔබම ටික වේලාවකට පසු ඔබේම කේතය නැවත ඇතුළත් කරන විට) මෙය ආපසු ගෙවනු ඇත!

ඔබ එය නිවැරදිව කළහොත්, ඔබට කුඩා සැකිලි සහිත කුඩා සංරචක ඇති අතර, සියල්ලටම වඩා, ඔබේ කේතය ඉම්බා නම්, කේතීකරණ භාෂා නොදන්නා කෙනෙකුට ඔබේ සැකිලි සහ ඔබේ තර්කනය තේරුම් ගත හැකිය! එබැවින් ඊට අමතරව, ඔබේ කාර්යයන් / ක්‍රම ඔබට හැකි තරම් කුඩා ලෙස තබා ගන්න. විශාල කාර්යයන් / ක්‍රම / පංති හා සසඳන විට අංග නඩත්තු කිරීම, ප්‍රතිචක්‍රීකරණය කිරීම, සමාලෝචනය කිරීම සහ එකතු කිරීම වඩා පහසු වනු ඇති බව ඔබ අවසානයේ සොයා ගනු ඇත. ඔබේ ඉදිරිපස කොටස වඩාත් නම්‍යශීලී වීමට අවශ්‍ය නම් (උදා: ඇන්ඩ්‍රොයිඩ් ෆ්‍රොන්ටෙන්ඩ් ලිවීම හෝ වෙනත් ෆ්‍රොන්ටෙන්ට් රාමුවකට මාරුවීම).

දර්ශනය, මිනිසා :)

ps: ඔබට 100% පිරිසිදු කේතයක් ක්‍රියාත්මක කිරීමට අවශ්‍ය නැත, මන්ද එය ඉතා මිල අධිකය - විශේෂයෙන් ඔබ කණ්ඩායම් සාමාජිකයින් පෙළඹවිය යුතු නම්;) නමුත්: පිරිසිදු කේත සඳහා ප්‍රවේශයක් සහ ඔබ සතුව ඇති දේ අතර හොඳ සමබරතාවයක් ඔබ සොයා ගත යුතුය (සමහර විට එය දැනටමත් ලස්සනයි)

ඔබට හැකි නම් පොත පරීක්ෂා කර එය ඔබගේ ආත්මයට ඇතුළු වීමට ඉඩ දෙන්න: https://de.wikipedia.org/wiki/Clean_Code