কৌণিক 7: ডাটা বাঁধনের মাধ্যমে শিশু উপাদানতে প্রেরিত একটি স্ট্রিং পরিবর্তনশীলের ভিতরে এইচটিএমএল ট্যাগগুলি এড়িয়ে যাওয়া প্রতিরোধ করুন

আমার অ্যাঙ্গুলার 7 এপ্লিকেশনে আমার স্ট্রিং ভ্যারিয়েবলের এক-উপায় ডেটা বাইন্ডিং ব্যবহার করে একটি সহজ হোম উপাদান রয়েছে (অর্থাৎ আমি [text] = "কিছু পাঠ্য" দিয়ে @ ইনপুট ব্যবহার করে একটি শিশু উপাদানতে একটি পরিবর্তনশীল প্রেরণ করি। "</কোড> সিনট্যাক্স)।

আমি পরিবর্তনশীল লিঙ্কের মত এইচটিএমএল ট্যাগ অন্তর্ভুক্ত করতে চাই এবং এটি শিশু উপাদানতে রেন্ডার করতে চাই তবে নীচের কোড নোঙ্গর ট্যাগের কারণে ব্যর্থ হয়। কিভাবে এই ঠিক করতে?

home.component.ts:

{ Component } from '@angular/core';
@Component({
  selector: 'app-home',
  templateUrl: '
    link'">
    
  ',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {}

card.component.ts:

import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-card',
  templateUrl: '
    
{{text}}

', styleUrls: ['./card.component.css'] }) export class CardComponent { @Input() text: string; }

সম্পাদনা করুন: দুঃখিত আমি ইতিমধ্যে একটি উত্তর খুঁজে পেয়েছি (নীচে আমার নিজের উত্তর দেখুন), আমি এটি দুই দিনের মধ্যে গ্রহণ করব

1
আপনি এই [text] = "{key: 'sdbjvbjhbvsdbv'}" এর মত চেষ্টা করেছেন?
যোগ লেখক abhishek, উৎস

6 উত্তর

আমি আসলে কিভাবে এটা করতে পাওয়া যায়। প্রথম, আমি জন্য অভ্যন্তরীণ HTML ব্যবহার করতে হবে

উপাদান:


{{text}}

দ্বিতীয়, কিছু ফঙ্কি সিনট্যাক্স। অভিভাবক হোম কম্পোনেন্ট নোটিশে যে href এবং লক্ষ্য বৈশিষ্ট্যগুলি উদ্ধৃতির প্রয়োজন নেই:



1
যোগ

আমি আসলে কিভাবে এটা করতে পাওয়া যায়। প্রথম, আমি জন্য অভ্যন্তরীণ HTML ব্যবহার করতে হবে

উপাদান:


{{text}}

দ্বিতীয়, কিছু ফঙ্কি সিনট্যাক্স। অভিভাবক হোম কম্পোনেন্ট নোটিশে যে href এবং লক্ষ্য বৈশিষ্ট্যগুলি উদ্ধৃতির প্রয়োজন নেই:



1
যোগ

এইচটিএমএল বাইপাস করতে DomSanitizer ব্যবহার করুন

import { Component, Input } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
  selector: 'app-card',
  templateUrl: '
    


', styleUrls: ['./card.component.css'] }) export class CardComponent implements OnInit { @Input() text: string; result: any; constructor(private sanitized: DomSanitizer) { } ngOnInit() { this.result = this.sanitized.bypassSecurityTrustHtml(this.text); } }

see stackblitz for complete guide https://stackblitz.com/edit/angular-xeojta?file=src%2Fapp%2Fhello.component.ts

0
যোগ

এইচটিএমএল বাইপাস করতে DomSanitizer ব্যবহার করুন

import { Component, Input } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
  selector: 'app-card',
  templateUrl: '
    


', styleUrls: ['./card.component.css'] }) export class CardComponent implements OnInit { @Input() text: string; result: any; constructor(private sanitized: DomSanitizer) { } ngOnInit() { this.result = this.sanitized.bypassSecurityTrustHtml(this.text); } }

see stackblitz for complete guide https://stackblitz.com/edit/angular-xeojta?file=src%2Fapp%2Fhello.component.ts

0
যোগ

লিঙ্কের জন্য আপনি ব্যবহার করতে পারেন

Angular Docs

যদি আপনি একটি বড় এইচটিএমএল ব্লক পাস করতে চান, আপনি [innerHtml] প্রয়োজন হবে https://angular.io/guide/template-syntax#property- বাঁধাই-অর-ক্ষেপক

দেখুন: https://angular.io/guide/ajs-quick-reference

0
যোগ

DomSanitizer ব্যবহার করে চেষ্টা করুন, আমি উদাহরণস্বরূপ যেখানে আমি আইফ্রেম src সম্পত্তি ব্যবহারের জন্য একটি URL স্যানিটাইজ করার জন্য এটি ব্যবহার করেছি, কিন্তু এটি HTML স্যানিটাইজ করার জন্য একটি ফাংশন রয়েছে:

import { DomSanitizer } from '@angular/platform-browser';
// ... then 
constructor(private sanitizer: DomSanitizer) {
}
// ... then (I used it with url, but it has an html sanitizer)
this.path = this.sanitizer.bypassSecurityTrustResourceUrl(this.sanitizer.sanitize(SecurityContext.URL, 'SOME_URL'));
// ... then in HTML
<iframe [src]="path"></iframe>
0
যোগ