कोणीय HTML बाइंडिंग

Question

मैं एक कोणीय अनुप्रयोग लिख रहा हूं और मेरे पास एक HTML प्रतिक्रिया है जिसे मैं प्रदर्शित करना चाहता हूं।

मैं उसको कैसे करू? यदि मैं केवल बाइंडिंग सिंटैक्स का उपयोग करता हूं तो {{myVal}}यह सभी HTML वर्णों (निश्चित रूप से) को एन्कोड करता है।

मैं बाध्य करने के लिए किसी भी तरह की जरूरत है innerHTMLएक के divचर मूल्य के लिए।

Comments

HTML बाध्यकारी stackoverflow.com/questions/36265026/…

— y3sh

मैंने समाधान की व्याख्या करने और उदाहरण देने के लिए एक वीडियो प्रतिक्रिया दी: youtube.com/watch?v=Pem2UXp7TXA

— Caleb Grams

क्या होगा यदि वैरिएबल <स्पैनर / राउटरलिंक] = ['कुछ-राउटर']> लिंक </ span>

— जी। मुक्ताद

Answer 1

सही सिंटैक्स निम्नलिखित है:

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

प्रलेखन संदर्भ

Comments

यह मददगार है: winorsavkin.com/post/119943127151/angular-2-template-syntax

— malix

क्या कोई ऐसा तरीका है जिससे मैं कोणीय को उस आंतरिक HTML के तत्वों पर बाध्य करने के लिए मजबूर कर सकता हूं? मुझे एक <a hrouter-linkacing="..."> </a> का उपयोग करने की आवश्यकता है, और बाहरी HTML से प्रदान करना चाहते हैं।

— तुलीहा

@thouliha मैं आपके प्रश्न के संबंध में एक नई पोस्ट शुरू करने की सलाह दूंगा।

— प्रोलिंक ००

यह मेरे मामले में स्ट्रिंग प्रदान करता है, लेकिन मार्कअप के लिए कुछ करता है। लगता है कि मार्कअप पर विशेषताओं को छीन लिया गया है। मैं

— २०.२.६

@paqogomez हां, यह असुरक्षित समझे जाने वाली किसी भी चीज को छीन लेता है

— जुआन मेंडेस

Answer 2

कोणीय 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 के साथ गतिशील घटक संकलित करने के लिए गतिशील टेम्पलेट का उपयोग / निर्माण कैसे कर सकता हूं?

Comments

इसका उत्तर होना चाहिए। टिप्पणी की जाने वाली दो पंक्तियों पर ध्यान दें। यह वास्तव में HTML को संभालने वाला दूसरा है।

— पकाओगोमेज़

import { BrowserModule, DomSanitizer } from '@angular/platform-browser'

— Paqogomez के

इसके अलावाimport { Pipe } from '@angular/core'

— अप्पुलस

यह उत्तर है, यहीं! NG1 में $ SCE की जगह NG2 में क्या था, इसके विवरण की तलाश थी। ;)

— १२:३४ पर jrista

बहुत बढ़िया जवाब। मेरा मुद्दा हल किया। बहुत बहुत धन्यवाद। मामले में किसी को यकीन नहीं है कि एक घटक में पाइप का उपयोग कैसे करें (जैसे मैं था): angular.io/guide/pipes बस इसे संबंधित मॉड्यूल और Voilá में अपनी घोषणाओं में जोड़ें!

— अलेजांद्रो नागी

Answer 3

[innerHtml] ज्यादातर मामलों में बढ़िया विकल्प है, लेकिन यह वास्तव में बड़े स्ट्रिंग्स के साथ या जब आपको html में हार्ड-कोडेड स्टाइलिंग की आवश्यकता होती है, तो यह विफल हो जाता है।

मैं अन्य दृष्टिकोण साझा करना चाहूंगा:

बस आपको अपनी html फ़ाइल में एक div बनाना है और इसे कुछ id देना है:

<div #dataContainer></div>

फिर, अपने कोणीय 2 घटक में, इस ऑब्जेक्ट का संदर्भ बनाएं (टाइपस्क्रिप्ट यहां):

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 भी देखें - इनरएचटीएमएल स्टाइल

Comments

मुझे अन्य समाधानों में कोई अंतर नहीं दिखाई देता है, सिवाय इसके कि आपका nativeElementप्रत्यक्ष रूप से गुणों का उपयोग करता है जिसे बुरा अभ्यास माना जाता है। मुझे यकीन है कि [innerHTML]="..."हुड के तहत भी यही होता है लेकिन अच्छे Angular2 अभ्यास तरीके से।

— गुंटर ज़ोचबॉयर

ऐसा नहीं है कि Angular2 कैसे काम करता है। HTML जिसे आप Angular2 घटकों के टेम्प्लेट में जोड़ते हैं, पहले Angular द्वारा संसाधित किया जाता है और उसके बाद ही DOM में जोड़ा जाता है। क्या आपने वास्तव [innerHTML]में Angular2 में मुद्दों और बड़े तार का अनुभव किया है?

— गुंटर Zöchbauer

मुझे लगता है कि इसे बग के रूप में रिपोर्ट किया जाना चाहिए। अपना परिणाम पोस्ट करने के लिए धन्यवाद।

— गुंटर Zöchbauer

[innerHtml]Html में हार्ड कोडित स्टाइल को हटाता है। एक wysiwyg संपादक को एकीकृत करने के लिए, मुझे यहां सूचीबद्ध दृष्टिकोण का उपयोग करना था।

— जॉनी एडमिट

मेरे लिए यह समाधान एक इनलाइन एसवीजी दस्तावेज़ को शामिल करने के लिए काम करता [innerHTML]था , जबकि दृष्टिकोण नहीं था।

— जारेड फेल्प्स

Answer 4

कोणीय 2@2.0.0-alpha.44 पर:

एक का उपयोग करते समय एचटीएमएल-बाइंडिंग काम नहीं करेगा {{interpolation}}, इसके बजाय एक "अभिव्यक्ति" का उपयोग करें:

अमान्य

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

-> एक त्रुटि फेंकता है (अपेक्षित अभिव्यक्ति के बजाय प्रक्षेप)

सही बात

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

-> यह सही तरीका है।

आप अभिव्यक्ति में अतिरिक्त तत्व जोड़ सकते हैं, जैसे:

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

संकेत

HTML का उपयोग कर जोड़ा गया है [innerHTML](या अन्य तरीकों से element.appenChild()या जैसे गतिशील रूप से जोड़ा गया है ) किसी भी तरह से कोणीय द्वारा संसाधित नहीं किया जाएगा सिवाय सुरक्षा शुद्धिकरण के लिए स्वच्छता के।
ऐसी चीजें केवल तभी काम करती हैं जब HTML को एक स्टैम्पलेट टेम्पलेट में स्टैटिकली जोड़ा जाता है। यदि आपको इसकी आवश्यकता है, तो आप रनटाइम पर एक घटक बना सकते हैं जैसे समझाया गया है कि मैं कोणीय 2.0 के साथ गतिशील घटक संकलित करने के लिए गतिशील टेम्पलेट का उपयोग / निर्माण कैसे कर सकता हूं?

Comments

फिर से कोशिश करने के बाद संपादित। समाधान मिला :)

— jvoigt

तीसरा उदाहरण काम नहीं कर रहा है। अभिव्यक्ति का मूल्यांकन नहीं है। आउटपुट बस स्ट्रिंग है ... किसी अन्य टैग तत्वों के साथ विश्वसनीय HTML को संयोजित करने का कोई अन्य तरीका?

— केविन विलेला पिंटो

Answer 5

एंगुलर के DOM सैनिटाइज़र का उपयोग किए बिना सीधे [इनर HTML] का उपयोग करना एक विकल्प नहीं है यदि इसमें उपयोगकर्ता द्वारा बनाई गई सामग्री है। उनके जवाब में @ GünterZöchbauer द्वारा सुझाए गए safeHtml पाइप सामग्री को साफ करने का एक तरीका है। निम्नलिखित निर्देश एक और है:

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>

Comments

मैंने इसका उपयोग करने की कोशिश की, लेकिन निम्न त्रुटि Can't bind to 'safeHtml' since it isn't a known property of 'div'. एनजी संस्करण 2.4.4 हो रही है

— LearnToday

@ObasiObenyOj आप अभी भी कर सकते हैं कि एक अलग निर्देश के उपयोग के बिना अगर एक सीमित मामला है, constructor( private sanitizer: Sanitizer) {} और परिणाम को आपको जो भी आवश्यक है, उसमें बाँध लें, तो ElementRef का उपयोग भी दृढ़ता से अनसुना है।

— वले स्टीव

Answer 6

कृपया अन्य उत्तर देखें जो अधिक अद्यतित हों।

यह मेरे लिए काम करता है: <div innerHTML = "{{ myVal }}"></div>(Angular2, Alpha 33)

एक अन्य SO के अनुसार: सर्वर को DOM से कोणीय 2 (Angular2 में सामान्य DOM हेरफेर) से HTML सम्मिलित करना , " इनर- html" Angular 1.X में "ng-bind-html" के बराबर है।

Comments

सही तरीका बिना {{}} के है: <div innerHTML = "myVal"> </ div>

— क्रिश्चियन बेंसलर

[संपत्ति] के बजाय वाक्य रचना {{प्रक्षेप}} बंधन का प्रयोग करें

— superluminary

यह निश्चित रूप से ऐसा करने का गलत तरीका है और इसे कम किया जाना चाहिए। यह div विशेषता के अंदर आपके सभी HTML को प्रस्तुत करेगा!

— AsGoodAsItGets

Answer 7

बस एक पूर्ण उत्तर के लिए बनाने के लिए, यदि आपकी HTML सामग्री घटक चर में है, तो आप इसका उपयोग भी कर सकते हैं:

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

Answer 8

अगर मैं यहाँ बिंदु को याद कर रहा हूँ तो मैं माफी माँगता हूँ, लेकिन मैं एक अलग दृष्टिकोण की सिफारिश करना चाहूँगा:

मुझे लगता है कि अपने सर्वर साइड एप्लिकेशन से कच्चे डेटा को वापस करना बेहतर है और इसे क्लाइंट साइड पर एक टेम्पलेट से बांधना है। यह और अधिक फुर्तीला अनुरोध करता है क्योंकि आप केवल अपने सर्वर से जसन लौटा रहे हैं।

मुझे यह प्रतीत नहीं होता है कि यह कोणीय का उपयोग करने के लिए समझ में नहीं आता है यदि आप सब कर रहे हैं html को सर्वर से ला रहा है और इसे "डोम" में "के रूप में" इंजेक्ट कर रहा है।

मुझे पता है कि कोणीय 1.x में एक html बाइंडिंग है, लेकिन मैंने अभी तक Angular 2.0 में एक समकक्ष नहीं देखा है। वे हालांकि बाद में इसे जोड़ सकते हैं। वैसे भी, मैं अभी भी आपके एंगुलर 2.0 ऐप के लिए डेटा एप पर विचार करूंगा।

यदि आप रुचि रखते हैं तो मेरे पास कुछ सरल डेटा बाइंडिंग के साथ कुछ नमूने हैं: http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples

Comments

ऐसे मामलों का उपयोग जरूर करें जहां आप कच्चे html को लाना और दिखाना चाहते हैं। उदा। रिमोट से लेख का एक स्वरूपित टुकड़ा प्राप्त करना।

— अलेक्जेंडर चेन

एक और अक्सर नजरअंदाज किया गया परिदृश्य टेम्पलेट में व्यापारिक तर्क की रक्षा कर रहा है, आप कभी-कभी अनधिकृत उपयोगकर्ताओं को जानकारी प्रदर्शित करने के लिए उपयोग किए जाने वाले तर्क को देखने के लिए नहीं चाहते हैं, इसलिए आप सर्वर साइड पर दृश्य तैयार करेंगे

— अय्याश

हालांकि, उदाहरण के लिए, एक HTML ईमेल प्रदर्शित करना - उचित बिंदु / प्रश्न!

— एक डैरेन

यदि आप उस बिंदु को याद कर रहे हैं (जो आपको अपने स्वयं के प्रवेश से प्रतीत होता है), तो प्रतिक्रिया क्यों दें? जाहिर है कि कोणीय का बिंदु डेटा को बाँधने और प्रस्तुत करने के लिए अपने दृश्य इंजन का उपयोग करना है। लेकिन इस तथ्य पर विचार करते हुए कि अनगिनत अनुप्रयोग हैं जहां एक कोणीय एप्लिकेशन का उपयोग किया जा सकता है, यह वास्तव में संभव है कि उनमें से एक या दो की आवश्यकता हो सकती है कि आपके एप्लिकेशन में प्रदर्शित होने वाले कुछ डेटा को पहले से ही HTML स्वरूपित किया जा सकता है, और यह सिर्फ उस मामले में हो सकता है जहां डेवलपर का उस सामग्री पर नियंत्रण नहीं है। दूसरे शब्दों में ... प्रासंगिक प्रश्न।

— ग्रेगर

हां हमें कोणीय को बस खोदना चाहिए और JQuery का उपयोग करना चाहिए क्योंकि Jquery यह एक बेहतर काम करता है ...

— साइमन_वेपर

Answer 9

संक्षिप्त उत्तर पहले से ही यहां दिया गया था: <div [innerHTML]="yourHtml">बाध्यकारी का उपयोग करें ।

हालाँकि यहाँ वर्णित बाकी सलाह भ्रामक हो सकती हैं। जब आप उस तरह के गुणों से बंधते हैं तो कोणीय में एक अंतर्निहित सैनिटाइजिंग तंत्र होता है। चूंकि कोणीय एक समर्पित सैनिटाइज़िंग लाइब्रेरी नहीं है, इसलिए यह किसी भी जोखिम को नहीं लेने के लिए संदिग्ध सामग्री के प्रति अति उत्साही है। उदाहरण के लिए, यह खाली स्ट्रिंग में सभी एसवीजी सामग्री को साफ करता है।

आप DomSanitizerसामग्री को bypassSecurityTrustXXXविधियों के साथ सुरक्षित चिह्नित करने के लिए अपनी सामग्री को " सुरक्षित " करने के लिए सलाह सुन सकते हैं । ऐसा करने के लिए पाइप का उपयोग करने के सुझाव भी हैं और उस पाइप को अक्सर कहा जाता है safeHtml।

यह सब भ्रामक है क्योंकि यह वास्तव में सैनिटाइज़िंग को दरकिनार करता है , न कि आपकी सामग्री को सैनिटाइज़ करने से। यह एक सुरक्षा चिंता का विषय हो सकता है क्योंकि यदि आप कभी भी उपयोगकर्ता द्वारा प्रदान की गई सामग्री या ऐसी किसी भी चीज़ के बारे में करते हैं जिसके बारे में आप निश्चित नहीं हैं - तो आप अपने आप को एक दुर्भावनापूर्ण कोड हमलों के लिए खोलते हैं।

यदि एंगुलर कुछ ऐसी चीज़ों को हटाता है जिनकी आपको इसके अंतर्निहित सैनिटाइजेशन की आवश्यकता होती है - तो आप इसे अक्षम करने के बजाय क्या कर सकते हैं यह वास्तविक सैनिटाइज़ेशन को एक समर्पित लाइब्रेरी को सौंपता है जो उस कार्य में अच्छा है। उदाहरण के लिए - DOMPurify।

मैंने इसके लिए एक रैपर लाइब्रेरी बनाई है ताकि इसे आसानी से कोणीय के साथ इस्तेमाल किया जा सके: https://github.com/TinkoffCreditSystems/ng-dompurify

यह HTML को घोषित रूप से साफ करने के लिए एक पाइप भी है:

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

यहां सुझाए गए पाइपों का अंतर यह है कि यह वास्तव में DOMPurify के माध्यम से स्वच्छता का काम करता है और इसलिए SVG के लिए काम करता है।

एक बात ध्यान में रखना है कि DOMPurify HTML / SVG को सैनिटाइज़ करने के लिए बहुत अच्छा है, लेकिन CSS नहीं। तो आप CSS को संभालने के लिए Angular के CSS sanitizer को प्रोवाइडर कर सकते हैं:

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

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

यह आंतरिक - हेंस ɵउपसर्ग है, लेकिन यह है कि कैसे कोणीय टीम अपने स्वयं के संकुल के साथ-साथ वैसे भी इसका उपयोग करती है। वह लाइब्रेरी एंगुलर यूनिवर्सल और सर्वर साइड रिडरिंग वातावरण के लिए भी काम करती है।

Answer 10

बस [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"इस तरह की उम्मीद के रूप में परिणाम बनाता है:

Stackoverflow है मददगार!

Comments

यदि आप इसे उस कंटेनर डिव के बिना चाहते हैं तो आपको अपनी सामग्री कैसे प्रदर्शित होगी? क्या यह संभव है?

— 13 Г И О И О

Answer 11

आप .html के बाद स्टाइल, लिंक और HTML के लिए कई पाइप लगा सकते हैं

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

और 'URL' सैनिटाइज़र के लिए .ts पाइप

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);
    }
}

यह किसी भी शैली और लिंक क्लिक इवेंट को परेशान किए बिना दोनों पर लागू होगा

Answer 12

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

innerHTML एचटीएमएल-तत्वों, जो आपको यह एचटीएमएल सामग्री प्रोग्राम के है स्थापित करने के लिए अनुमति देता है की एक संपत्ति है। एक इनरटेक्स्ट गुण भी है जो सामग्री को सादे पाठ के रूप में परिभाषित करता है।

[attributeName]="value"बॉक्स ब्रैकेट, विशेषता आसपास के एक कोणीय इनपुट बाध्यकारी परिभाषित करता है। इसका मतलब है, कि संपत्ति का मूल्य (आपके मामले में इनरहेटलएम) दी गई अभिव्यक्ति के लिए बाध्य है, जब अभिव्यक्ति-परिणाम बदलता है, तो संपत्ति का मूल्य भी बदल जाता है।

तो मूल रूप [innerHtml]से आपको दिए गए HTML- तत्व के HTML-conent को बांधने और गतिशील रूप से बदलने की अनुमति मिलती है।

Answer 13

में कोणीय 2 आप बाइंडिंग के 3 प्रकार कर सकते हैं:

• [property]="expression"-> कोई भी HTML प्रॉपर्टी एक
  एक्सप्रेशन से लिंक कर सकती है । इस स्थिति में, यदि अभिव्यक्ति में परिवर्तन होता है तो संपत्ति अपडेट हो जाएगी, लेकिन यह दूसरे तरीके से काम नहीं करता है।
• (event)="expression" -> जब घटना अभिव्यक्ति को सक्रिय करती है।
• [(ngModel)]="property"-> संपत्ति को js (या ts) से html में बांधता है। इस संपत्ति पर कोई भी अपडेट हर जगह ध्यान देने योग्य होगा।

एक अभिव्यक्ति एक मूल्य, एक विशेषता या एक विधि हो सकती है। उदाहरण के लिए: '4', 'कंट्रोलर.वर', 'गेटवैल्यू ()'

यहाँ उदाहरण है

Answer 14

DOM को तत्वों को गतिशील रूप से जोड़ने का तरीका, जैसा कि Angular 2 doc पर बताया गया है, @ Angular / core से ViewContainerRef वर्ग का उपयोग करके है।

आपको जो करना है वह एक निर्देश की घोषणा करना है जो ViewContainerRef को लागू करेगा और आपके DOM पर प्लेसहोल्डर की तरह काम करेगा।

आदेश

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

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

  constructor(public viewContainerRef: ViewContainerRef) { }

}

फिर, उस टेम्पलेट में जहां आप घटक को इंजेक्ट करना चाहते हैं:

एचटीएमएल

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

फिर, इंजेक्ट किए गए कंपोनेंट कोड से, आप अपने इच्छित एचटीएमएल वाले कंपोनेंट को इंजेक्ट करेंगे:

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 पर एक पूरी तरह से काम कर रहे डेमो ऐप को गतिशील रूप से डोम डेमो में जोड़ दिया

Answer 15

समाधान प्राप्त करने के लिए आप कई तरीकों का उपयोग कर सकते हैं। जैसा कि पहले से ही अनुमोदित उत्तर में कहा गया है, आप उपयोग कर सकते हैं:

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

आप जो हासिल करने की कोशिश कर रहे हैं, उसके आधार पर आप जावास्क्रिप्ट डोम (अनुशंसित नहीं, डोम ऑपरेशंस धीमा हैं) जैसी अन्य चीजें भी आज़मा सकते हैं:

प्रस्तुतीकरण

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

अंग

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

प्रॉपर्टी बाइंडिंग

जावास्क्रिप्ट डोम बाहरी HTML

Comments

भले ही डोम ऑपरेशन कोणीय की तुलना में धीमा हो या न हो, इसका उपयोग करके getElementsByIdया किसी अन्य चयन विधि से खराब है क्योंकि यह पूरी तरह से अलग घटकों से संबंधित तत्वों को कैप्चर कर सकता है यदि वे एक ही आईडी (या अन्य मानदंडों) के साथ तत्व रखते हैं।

— एविएड पी।

इसके अलावा यह पूरी तरह से किसी भी कोणीय-क्षेत्र के बाहर प्रदर्शन करता है इसलिए परिवर्तन नहीं उठाए जाएंगे।

— फिलिप मीसनर

Answer 16

हम हमेशा 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>

Comments

यह तब भी आवश्यक है जब आपको लगता है कि यह नहीं है। उदाहरण के लिए style: background-colorसभी चीजों को छीन लिया जा सकता है और इसलिए यह सबसे अच्छा है कि इसे शुरू से ही इस्तेमाल करना शुरू करें या आप बाद में बहुत भ्रमित हो जाएंगे।

— साइमन_वेअर

मैं समझता हूं कि यह स्क्रिप्ट सभी दुर्भावनापूर्ण सामग्री (bypassSecurityTrustHtml) को अनुमति देने के लिए है, जैसा कि आप यह कहते हैं कि मुझे लगता है कि जब तक आप स्रोत पर भरोसा नहीं करते तब तक इस पाइप की आवश्यकता नहीं है। रेफ़र्टो: angular.io/api/platform-browser/DomSanitizer#security-risk

— Sae

Answer 17

यदि आप चाहते हैं कि कोणीय 2 या कोणीय 4 में और इनलाइन सीएसएस रखना चाहते हैं तो आप उपयोग कर सकते हैं

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

Comments

इसने मुझे एक त्रुटि दी `अनकैप्ड (वादे में): त्रुटि: टेम्प्लेट पार्स त्रुटियां: पाइप 'KeepHtml' नहीं मिल सका`

— प्रवीण

"@ कोणीय / कोर" से {पाइप, पाइपट्रांसफॉर्म} आयात करें;

— जय मोमा

Answer 18

आप नीचे दिए गए विहित रूप का उपयोग करके टेम्पलेट के साथ कोणीय घटक वर्ग के गुणों को भी बांध सकते हैं:

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

कोणीय प्रलेखन: https://angular.io/guide/template-syntax#property-binding-protyty

काम कर रहे स्टैकब्लिट्ज़ उदाहरण यहाँ देखें

Answer 19

कोणीय v2.1.1 में कार्य करना

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

Comments

यह पैदा करता है: <div _ngcontent-luf-0=""></div>मेरे लिए। divखाली है।

— स्कॉट मार्कस

Answer 20

यदि आपके पास अपने कोणीय (या जो भी ढांचे) अनुप्रयोग में टेम्पलेट हैं, और आप एचटीएमएल टेम्पलेट्स को अपने बैकएंड से HTTP अनुरोध / प्रतिक्रिया के माध्यम से वापस करते हैं, तो आप फ्रंटएंड और बैकएंड के बीच टेम्पलेट को मिला रहे हैं।

सिर्फ टेम्प्लेटिंग सामान को सीमांत में ही क्यों न छोड़ें (मैं यह सुझाव दूंगा), या बैकएंड में (बहुत ही अट्रैक्टिव इमो)?

और यदि आप फ्रंटेंड में टेम्प्लेट रखते हैं, तो बैकेंड के अनुरोधों के लिए सिर्फ JSON से जवाब क्यों नहीं देते हैं। आपको एक RESTful संरचना को लागू करने की भी आवश्यकता नहीं है, लेकिन एक तरफ टेम्पलेट रखने से आपका कोड अधिक पारदर्शी हो जाता है।

यह तब वापस आएगा जब किसी और को आपके कोड का सामना करना होगा (या यहां तक ​​कि आप खुद थोड़ी देर बाद अपने कोड में फिर से प्रवेश कर रहे हैं)!

यदि आप इसे सही करते हैं, तो आपके पास छोटे टेम्पलेट के साथ छोटे घटक होंगे, और सबसे अच्छा, यदि आपका कोड imba है, तो कोई व्यक्ति जो कोडिंग भाषाओं को नहीं जानता है, वह आपके टेम्पलेट्स और आपके तर्क को समझने में सक्षम होगा! इसलिए इसके अलावा, अपने कार्यों / विधियों को जितना हो सके उतना छोटा रखें। आपको अंततः पता चलेगा कि बड़े कार्यों / विधियों / कक्षाओं की तुलना में रखरखाव, पुनर्संरचना, समीक्षा और जोड़ना बहुत आसान हो जाएगा और सामने वाले और बैकएंड के बीच टेम्प्लेटिंग और तर्क को मिलाएगा - और बैकएंड में अधिक से अधिक तर्क रखेंगे यदि आपके सामने वाले को अधिक लचीला होना चाहिए (जैसे कि एंड्रॉइड फ्रंटेंड लिखना या किसी अलग फ्रंटेंड ढांचे पर स्विच करना)।

दर्शन, मनुष्य :)

पीएस: आपको 100% स्वच्छ कोड लागू करने की आवश्यकता नहीं है, क्योंकि यह बहुत महंगा है - खासकर यदि आपको टीम के सदस्यों को प्रेरित करना है;) लेकिन: आपको क्लीनर कोड के दृष्टिकोण और आपके पास क्या है (शायद यह हो पहले से ही साफ है)

पुस्तक की जाँच करें यदि आप कर सकते हैं और इसे अपनी आत्मा में प्रवेश करने दें: https://de.wikipedia.org/wiki/Clean_Code

Comments

कभी-कभी सर्वर साइड से HTML प्राप्त करना आवश्यक होता है, जब आप SOAP की तरह पुराने API के साथ काम कर रहे होते हैं। मैं बीएससी (भारत स्टॉक एक्सचेंज) के साथ अपने एक प्रोजेक्ट पर काम कर रहा था और वे भुगतान करते समय बैंक पेज का HTML कोड वापस कर देते हैं। इसलिए आप अपना एपीआई नहीं बदल सकते हैं।

— महेंद्र वेकोस

आप एक मिडलवेयर लिख सकते हैं जो अक्सर साबुन एपी पर सवाल उठाता है, और उदाहरण के लिए सॉकेट में निकाले गए परिणाम प्रदान करता है। साबुन के माध्यम से जानकारी का उपभोग करना और निकालना एक दर्द हो सकता है।

— गुंट्रम

कच्चे मार्कअप के लिए वास्तव में बड़ा स्पष्ट उपयोग मामला है जब आपका मार्कअप एक सीएमएस से आता है और एक WYSIWYG संपादक में लिखा जाता है। आप उदाहरण के लिए, एक हेडलेस CMS से कई एंडपॉइंट्स परोस सकते हैं। इस तरह की बात यह है कि हर टेम्पलेटिंग इंजन में कच्चे मार्कअप का विकल्प होता है।

— गब्बर