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




angular2-template angular2-databinding (12)

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

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

मुझे किसी भी तरह से div के innerHTML को वैरिएबल मान में बाँधने की आवश्यकता है।


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>

फिर, इंजेक्ट किए गए कंपोनेंट कोड से, आप अपने इच्छित 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 पर पूरी तरह से काम करने वाले डेमो ऐप को गतिशील रूप से डोम डेमो में जोड़ा


Html डायनामिक कंटेंट को रेंडर करने के लिए हम हमेशा html HTML को भीतर की संपत्ति में पास कर सकते हैं लेकिन डायनामिक html कंटेंट संक्रमित या दुर्भावनापूर्ण भी हो सकता है। तो डायनामिक कंटेंट को डायनामिक पास करने से पहले हमें हमेशा यह सुनिश्चित कर लेना चाहिए कि कंटेंट को सैनिटाइज़ ( DOMSanitizer का उपयोग 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>

आप इस विधि का उपयोग कर सकते हैं

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

या इसे आईडी से बांधें

 <div #html></div>

और घटक में

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

एंगुलर के डोम सैनिटाइजर का उपयोग किए बिना सीधे [इनर 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>

ज्यादातर मामलों में [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;
    }
}

तो बस html तत्व के लिए कुछ पाठ संलग्न करने के लिए loadData फ़ंक्शन का उपयोग करें।

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

.com/questions/36265026/… भी देखें .com/questions/36265026/…


नीचे दिया गया कोड आपकी सहायता करेगा

myval आप इच्छित html से बदल सकते हैं

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

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

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

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

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


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

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

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

प्रदर्शन

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

अंग

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

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

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


AngularJS v2.1.1 में कार्य करना

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

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

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

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

here उदाहरण here







angular2-databinding