কৌণিক এইচটিএমএল বাঁধাই

Question

আমি একটি কৌণিক অ্যাপ্লিকেশন লিখছি এবং আমি প্রদর্শন করতে চাই একটি HTML প্রতিক্রিয়া আছে।

আমি কেমন করে ঐটি করি? আমি যদি কেবল বাঁধার সিনট্যাক্সটি ব্যবহার করি তবে {{myVal}}এটি সমস্ত HTML অক্ষরকে অবশ্যই এনকোড করে (অবশ্যই)।

আমি জুড়তে অনুমতি একরকম প্রয়োজন innerHTMLএকটি এর divপরিবর্তনশীল মান।

Comments

HTML এ কাজ ডান দিকে একটি উপাদান সংজ্ঞায়িত সিএসএস পেয়ে বাঁধাই জন্য সম্পর্কিত পোস্ট stackoverflow.com/questions/36265026/...

— y3sh

সমাধানটি ব্যাখ্যা করার জন্য এবং একটি উদাহরণ দেওয়ার জন্য আমি একত্রে একটি ভিডিও প্রতিক্রিয়া রেখেছি: youtube.com/watch?v=Pem2UXp7TXA

— কালেব গ্রামস

যদি চলকটি <স্প্যান [রাউটারলিঙ্ক] = ['কিছু-রাউটার']> লিঙ্ক </ span> এর মত কৌনিক ট্যাগ বা ব্যবহারকারীর সংজ্ঞায়িত ট্যাগ ধারণ করে তবে কী হবে

— জি

Answer 1

সঠিক বাক্য গঠনটি নিম্নলিখিত:

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

উপর কাজ করে 9.1.9

ডকুমেন্টেশন রেফারেন্স

Comments

এই সহায়ক victorsavkin.com/post/119943127151/angular-2-template-syntax

— malix

আমি কোনওভাবেই কৌনিককে সেই অভ্যন্তরীণ এইচটিএমএল এর উপাদানগুলির সাথে এটি বন্ধন চালাতে বাধ্য করতে পারি? আমার একটি <a [router-link ]="..."> </a> ব্যবহার করতে হবে এবং এটি বাইরের এইচটিএমএল থেকে সরবরাহ করতে চাই।

— তুমিলিহা

@ থলি আমি আপনার প্রশ্ন সম্পর্কিত একটি নতুন পোস্ট শুরু করার পরামর্শ দেব।

— prolink007

এটি আমার ক্ষেত্রে স্ট্রিংটি রেন্ডার করে তবে মার্কআপে কিছু করে। মনে হয় মার্কআপে অ্যাট্রিবিউটগুলি ছড়িয়ে দেওয়া হয়েছে। আমি ২.৪..6

— পাকোগোমেজ

@ পাইকোগোমেজ হ্যাঁ, এটি অনিরাপদ বলে মনে করে এমন কোনও কিছুই সরিয়ে দেয়

— জুয়ান মেন্ডেস

Answer 2

কৌণিক 2.0.0 এবং কৌণিক 4.0.0 ফাইনাল

নিরাপদ সামগ্রীর জন্য

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

DOMSanitizer

অ্যাঙ্গুলারস ডিওএম স্যানিটাইজার ব্যবহার করে সম্ভাব্য অনিরাপদ এইচটিএমএলকে স্পষ্টভাবে বিশ্বাসযোগ্য হিসাবে চিহ্নিত করা দরকার তাই সামগ্রীর সম্ভাব্য অনিরাপদ অংশগুলি না ছড়িয়ে দেয়

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

আরসি .১ এ আরও দেখুন যে বাইন্ডিং সিনট্যাক্স ব্যবহার করে কিছু স্টাইল যুক্ত করা যায় না

এবং ডকস: https://angular.io/api/platform-browser/DomSanitizer

নিরাপত্তা সতর্কতা

বিশ্বাসযোগ্য ব্যবহারকারী যুক্ত এইচটিএমএল সুরক্ষা ঝুঁকি তৈরি করতে পারে। পূর্বে উল্লিখিত ডক্সগুলি বলে:

কোনও bypassSecurityTrust...এপিআইকে কল করা অ্যানজুলারের অন্তর্নির্মিত স্যানিটাইজেশনকে অদৃশ্য হয়ে যাওয়া মানের জন্য অক্ষম করে this এই সুরক্ষা প্রসঙ্গে যেকোন ব্যবহারকারীর ডেটা যথাযথভাবে পালানো হয়েছে তা নিশ্চিত করুন। আরও বিশদের জন্য সুরক্ষা গাইডটি দেখুন ।

কৌণিক মার্কআপ

কিছুটা এইরকম

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

সঙ্গে

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

কৌণিক-নির্দিষ্ট কিছুতে কৌণিকর প্রক্রিয়া ঘটায় নাfoo । কৌণিক উত্পন্ন কোড সহ বিল্ড টাইম সময়ে কৌণিক নির্দিষ্ট মার্কআপ প্রতিস্থাপন করে। রানটাইমের সময় যুক্ত করা মার্কআপ কৌণিক দ্বারা প্রক্রিয়া করা হবে না ।

এইচটিএমএল যুক্ত করতে যাতে কৌণিক-নির্দিষ্ট মার্কআপ থাকে (সম্পত্তি বা মান বাঁধাই, উপাদান, নির্দেশিকা, পাইপ, ...) এটি গতিশীল মডিউল যুক্ত করতে হবে এবং রানটাইমের সময় উপাদানগুলি সংকলন করতে হবে। এই উত্তরটি আরও বিশদ সরবরাহ করে যে আমি কৌনিক 2.0 এর সাথে ডায়নামিক কম্পোনেন্ট সংকলন করতে ডায়নামিক টেম্পলেট ব্যবহার / তৈরি করতে পারি?

Comments

এই উত্তর হওয়া উচিত। মন্তব্য করা হয়েছে যে দুটি লাইন মনোযোগ দিন। এটি আসলে দ্বিতীয়টি যা এইচটিএমএল পরিচালনা করে।

— পাকোগোমেজ

নিশ্চিত হনimport { BrowserModule, DomSanitizer } from '@angular/platform-browser'

— পাকোগোমেজ

এছাড়াওimport { Pipe } from '@angular/core'

— অ্যাপুলাস

এই উত্তর, ঠিক এখানে! এনজি 2-এ এনজি 1-এর এসসিই প্রতিস্থাপন করেছে সে সম্পর্কে বিশদ অনুসন্ধান করছিল। ;)

— জ্রিস্টা

দুর্দান্ত উত্তর। আমার সমস্যা সমাধান। অনেক ধন্যবাদ. কোনও অংশে পাইপটি কীভাবে ব্যবহার করবেন তা নিশ্চিত না হওয়ার ক্ষেত্রে (যেমন আমি ছিলাম): কৌণিক.ইউ / গাইড / পাইপগুলি কেবল এটি সম্পর্কিত মডিউলে আপনার ঘোষণায় যুক্ত করুন এবং ভয়েলি!

— আলেজান্দ্রো নাগি

Answer 3

[innerHtml] বেশিরভাগ ক্ষেত্রে দুর্দান্ত বিকল্প, তবে এটি সত্যিই বড় স্ট্রিংগুলির সাথে ব্যর্থ হয় বা যখন আপনার এইচটিএমএলে হার্ড কোডিং স্টাইলিংয়ের প্রয়োজন হয়।

আমি অন্যান্য পদ্ধতির ভাগ করতে চাই:

আপনাকে যা করতে হবে তা হ'ল আপনার এইচটিএমএল ফাইলটিতে একটি ডিভি তৈরি করা এবং এটির কিছু আইডি দেওয়া:

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

তারপরে loadDataএইচটিএমএল উপাদানটিতে কিছু পাঠ্য যুক্ত করার জন্য কেবল ফাংশনটি ব্যবহার করুন।

এটি এমন এক উপায় যা আপনি এটি স্থানীয় জাভাস্ক্রিপ্ট ব্যবহার করে করতে পারেন তবে কৌনিক পরিবেশে। আমি এটির প্রস্তাব দিচ্ছি না, কারণ কোডটি আরও অগোছালো করে তোলে, তবে কখনও কখনও অন্য কোনও বিকল্প থাকে না।

আরও দেখুন কৌণিক 2 - innerHTML স্টাইলিং

Comments

আপনার অন্যের সমাধানগুলিতে আমি কোনও পার্থক্য দেখতে পাচ্ছি না তা ছাড়া আপনার nativeElementপ্রত্যক্ষদর্শীরা অ্যাক্সেস করে যা খারাপ অভ্যাস হিসাবে বিবেচিত হয়। আমি নিশ্চিত [innerHTML]="..."হুডের নীচে তবে ভাল অ্যাঙ্গুলার 2 অনুশীলন পদ্ধতিতে এটি করি।

— গন্টার জ্যাচবাউয়ার

এটি Angular2 কীভাবে কাজ করে তা নয়। আপনি কৌণিক 2 উপাদানগুলির টেম্পলেটগুলিতে যে এইচটিএমএল যুক্ত করেন তা প্রথমে কৌণিক দ্বারা প্রক্রিয়া করা হয় এবং এর পরে কেবল ডিওমে যুক্ত হয়। আপনি কি [innerHTML]Angular2 এ আসলে সমস্যাগুলি এবং বড় স্ট্রিংগুলির অভিজ্ঞতা পেয়েছেন?

— গন্টার জ্যাচবাউয়ার

আমি মনে করি এটি বাগ হিসাবে রিপোর্ট করা উচিত। আপনার ফলাফল পোস্ট করার জন্য ধন্যবাদ।

— গন্টার জ্যাচবাউয়ার

[innerHtml]এইচটিএমএলে হার্ড-কোডড স্টাইলিং সরিয়ে দেয়। উইসইভিগ সম্পাদককে সংহত করার জন্য, আমাকে এখানে তালিকাবদ্ধ পদ্ধতিটি ব্যবহার করতে হয়েছিল।

— জনি অ্যাডামিত

আমার জন্য এই সমাধানটি একটি ইনলাইন এসভিজি ডকুমেন্ট অন্তর্ভুক্ত করার জন্য কাজ করেছিল, যদিও [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>

ইঙ্গিত

এইচটিএমএল যুক্ত করা [innerHTML](বা অন্যান্য উপায়ে যেমন element.appenChild()বা অনুরূপ দ্বারা গতিশীল যুক্ত ) সুরক্ষার উদ্দেশ্যে স্যানিটাইজেশন ব্যতীত কোনওভাবেই অ্যাঙ্গুলার দ্বারা প্রক্রিয়া করা হবে না।
এই জাতীয় জিনিসগুলি তখনই কার্যকর হয় যখন কোনও উপাদানগুলির টেম্পলেটে এইচটিএমএল স্থিতিশীলভাবে যুক্ত করা হয়। আপনার যদি এটির প্রয়োজন হয়, আপনি রানটাইমের সময় এমন একটি উপাদান তৈরি করতে পারেন যা এঙ্গুলার 2.0 এর সাথে ডায়নামিক কম্পোনেন্ট সংকলন করতে ডায়নামিক টেম্পলেট ব্যবহার / তৈরি করতে পারি?

Comments

আবার চেষ্টা করার পরে সম্পাদিত। সমাধান পাওয়া গেছে :)

— jvoigt

তৃতীয় উদাহরণ কাজ না। অভিব্যক্তি মূল্যায়ন করা হয় না। আউটপুটটি কেবল স্ট্রিং ... অন্য কোনও ট্যাগের উপাদানগুলির সাথে বিশ্বস্ত এইচটিএমএলকে যুক্ত করার অন্য কোনও উপায়?

— কেভিন ভিলেলা পিন্টো

Answer 5

অ্যাঙ্গুলারের ডিওএম স্যানিটাইজার ব্যবহার না করে সরাসরি [ইনারএইচটিএমএল] ব্যবহার করা কোনও বিকল্প নয় যদি এতে ব্যবহারকারীর তৈরি সামগ্রী থাকে। @ গন্তেরজ্যাচবাউয়ার তার উত্তরে প্রস্তাবিত সেফএইচটিএমএল পাইপ বিষয়বস্তু স্যানিটাইজ করার একটি উপায়। নিম্নলিখিত নির্দেশটি অন্য একটি:

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'. এনজি-সংস্করণ ২.৪.৪

— পাচ্ছি

@ ওবাসি ওবেেনিজ আপনি যদি এখনও কোনও সীমিত ক্ষেত্রে স্বতন্ত্র নির্দেশনা ব্যবহার না করে তা করতে পারেন constructor( private sanitizer: Sanitizer) {} এবং ফলাফলটি যা আপনার প্রয়োজন তা আবদ্ধ করুন, এছাড়াও এলিমেন্টের শেফের ব্যবহার দৃ strongly়রূপে অসমর্থিত।

— ভ্যালি স্টিভ

Answer 6

দয়া করে অন্যান্য উত্তরগুলি উল্লেখ করুন যা আরও আধুনিক up

এটি আমার পক্ষে কাজ করে: <div innerHTML = "{{ myVal }}"></div>(কৌণিক 2, আলফা 33)

অন্য এসও অনুসারে: কৌণিক 2 (অ্যাঙ্গুলার 2 এ সাধারণ ডিওএম ম্যানিপুলেশন) দিয়ে সার্ভার থেকে এইচটিএমএল সন্নিবেশ করা , "অভ্যন্তরীণ - এইচটিএমএল" কৌণিক 1.X এর "এনজি-বাইন্ড-এইচটিএমএল" এর সমতুল্য

Comments

সঠিক উপায়টি {{}}: <div অভ্যন্তরীণ এইচটিএমএল = "মাইওয়াল"> </div> ছাড়াই

— খ্রিস্টান

[সম্পত্তি] এর পরিবর্তে সিনট্যাক্স {{ক্ষেপক}} বাঁধাই ব্যবহার করুন

— superluminary

এটি অবশ্যই এটি করার ভুল উপায় এবং এটি হ্রাস করা উচিত। এটি ডিভ বৈশিষ্ট্যের ভিতরে আপনার সমস্ত এইচটিএমএল রেন্ডার করবে!

— AsGoodAsItGet

Answer 7

কেবলমাত্র একটি সম্পূর্ণ উত্তর দেওয়ার জন্য, যদি আপনার এইচটিএমএল সামগ্রীটি কোনও উপাদান ভেরিয়েবলে থাকে তবে আপনি এটি ব্যবহার করতে পারেন:

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

Answer 8

আমি যদি এখানে বিন্দুটি মিস করছি তবে আমি ক্ষমা চাইছি, তবে আমি আলাদা পদ্ধতির সুপারিশ করতে চাই:

আমি মনে করি আপনার সার্ভার সাইড অ্যাপ্লিকেশন থেকে কাঁচা ডেটা ফিরিয়ে দেওয়া এবং এটি ক্লায়েন্টের পাশের কোনও টেম্পলেটের সাথে আবদ্ধ করা ভাল। আপনি কেবল আপনার সার্ভার থেকে জসনকে ফিরে আসার কারণে এটি আরও নিমপযুক্ত অনুরোধগুলির জন্য তৈরি করে।

আমার কাছে এটি দেখে মনে হচ্ছে না যে আপনি কৌনিকটি ব্যবহার করা বোধগম্য হন যদি আপনি যা করছেন তা সার্ভার থেকে এইচটিএমএল আনছে এবং এটি "যেমন আছে" ডম-তে ইনজেক্ট করছে।

আমি জানি অ্যাঙ্গুলার 1.x এর একটি এইচটিএমএল বাইন্ডিং রয়েছে তবে আমি এখনও কৌনিক 2.0 তে প্রতিরূপ দেখিনি। তারা যদিও এটি পরে যুক্ত করতে পারে। যাইহোক, আমি আপনার অ্যাংুলার ২.০ অ্যাপের জন্য এখনও একটি ডেটা এপিআই বিবেচনা করব।

আপনার আগ্রহী হলে আমার কাছে কয়েকটি সাধারণ ডেটা বাইন্ডিং সহ কয়েকটি নমুনা রয়েছে: http://www.syntaxsuccess.com/viewarticle/angular-2.0- উদাহরণ

Comments

আপনি অবশ্যই কাঁচা এইচটিএমএল আনতে এবং প্রদর্শন করতে চান এমন ক্ষেত্রে অবশ্যই ব্যবহার রয়েছে। উদাহরণস্বরূপ রিমোট থেকে নিবন্ধের ফর্ম্যাট অংশটি আনতে।

— আলেকজান্ডার চেন

অন্য একটি প্রায়শ উপেক্ষা করা দৃশ্যটি টেমপ্লেটে ব্যবসায়িক যুক্তি রক্ষা করছে, আপনি কখনও কখনও অননুমোদিত ব্যবহারকারীদের তথ্য প্রদর্শন করতে যে যুক্তিটি ব্যবহার করছেন তা দেখতে চান না, তাই আপনি বরং সার্ভারের দিকের দৃশ্যটি প্রস্তুত করবেন

— আইয়্যাশ

এছাড়াও, এইচটিএমএল ইমেল প্রদর্শিত হচ্ছে - উদাহরণস্বরূপ - ন্যায্য পয়েন্ট / প্রশ্ন যদিও!

— একটি প্রিয়তম

আপনি যদি বিন্দুটি হারিয়ে ফেলছেন (যা আপনি নিজের নিজের ভর্তি করে বলে মনে করছেন), তবে কেন একটি প্রতিক্রিয়া পোস্ট করবেন? স্পষ্টতই অ্যাঙ্গুলারটির বিন্দুটি এর ভিউ ইঞ্জিনটিকে ডেটা বাঁধতে এবং রেন্ডার করতে ব্যবহার করে। তবে এমন একাধিক অ্যাপ্লিকেশন রয়েছে যেখানে অ্যাংুলার অ্যাপ ব্যবহার করা যেতে পারে, এই বিষয়টি বিবেচনা করে বাস্তবে সম্ভব যে এগুলির মধ্যে একটি বা দু'এরই প্রয়োজন হতে পারে যে আপনার অ্যাপ্লিকেশনটিতে প্রদর্শিত হতে হবে এমন কিছু ডেটা ইতিমধ্যে এইচটিএমএল ফর্ম্যাট করা যেতে পারে, এবং এটি কেবল এমন ঘটতে পারে যেখানে ডেভেলপারের সেই সামগ্রীর উপর নিয়ন্ত্রণ না থাকে। অন্য কথায় ... প্রাসঙ্গিক প্রশ্ন।

— গ্রেগর

ইয়া, আমাদের কেবল কৌণিক খনন করা উচিত এবং

— জ্যাকুয়েরি

Answer 9

এখানে ইতিমধ্যে সংক্ষিপ্ত উত্তর সরবরাহ করা হয়েছিল: <div [innerHTML]="yourHtml">বাইন্ডিং ব্যবহার করুন ।

তবে এখানে উল্লিখিত বাকি পরামর্শগুলি বিভ্রান্তিকর হতে পারে। যখন আপনি এর মতো বৈশিষ্ট্যে আবদ্ধ হন তখন কৌণিকের একটি অন্তর্নির্মিত স্যানিটাইজিং মেকানিজম থাকে। যেহেতু অ্যাঙ্গুলার কোনও উত্সর্গীকৃত স্যানিটাইজিং লাইব্রেরি নয়, সন্দেহজনক বিষয়বস্তুর প্রতি কোনও ঝুঁকি না নেওয়ার জন্য এটি অতিমাত্রায়। উদাহরণস্বরূপ, এটি সমস্ত এসভিজি সামগ্রীকে খালি স্ট্রিংয়ে স্যানিটাইজ করে।

পদ্ধতিগুলির DomSanitizerসাহায্যে সামগ্রীকে নিরাপদ হিসাবে চিহ্নিত করতে আপনি আপনার সামগ্রিকে "স্যানিটাইজ" করার পরামর্শ শুনতে পারেন bypassSecurityTrustXXX। এটি করার জন্য পাইপ ব্যবহার করার পরামর্শও রয়েছে এবং সেই পাইপটি প্রায়শই বলা হয় safeHtml।

এগুলি সমস্ত বিভ্রান্তিকর কারণ এটি প্রকৃতপক্ষে স্যানিটাইজিংকে বাদ দেয় , আপনার সামগ্রীকে স্যানিটাইজ করে না। এটি সুরক্ষা উদ্বেগের কারণ হতে পারে কারণ আপনি যদি ব্যবহারকারী সরবরাহিত সামগ্রী বা আপনি যে বিষয়ে নিশ্চিত নন এমন কিছু করে থাকেন - আপনি দূষিত কোড আক্রমণে নিজেকে উন্মুক্ত করেন open

যদি কৌনিকটি অন্তর্নির্মিত স্যানিটাইজেশন দ্বারা আপনার প্রয়োজনীয় কিছু অপসারণ করে - এটি নিষ্ক্রিয় করার পরিবর্তে আপনি যা করতে পারেন তা হ'ল প্রকৃত স্যানিটাইজেশনকে একটি উত্সর্গীকৃত লাইব্রেরিতে পেশ করা যা সেই কাজটিতে ভাল। উদাহরণস্বরূপ - DOMPurify।

আমি এটির জন্য একটি মোড়কের লাইব্রেরি তৈরি করেছি যাতে এটি কৌনিকের সাথে সহজেই ব্যবহার করা যায়: https://github.com/TinkoffCreditSystems/ng-dompurify

এটিতে এইচটিএমএলকে ঘোষণামূলকভাবে স্যানিটাইজ করার জন্য একটি পাইপও রয়েছে:

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

এখানে প্রস্তাবিত পাইপের পার্থক্য হ'ল এটি আসলে ডোমপুরিফাইয়ের মাধ্যমে স্যানিটাইজেশন করে এবং তাই এসভিজির জন্য কাজ করে।

একটি বিষয় মনে রাখা উচিত: ডুম্পিউরিফাইটি এইচটিএমএল / এসভিজি স্যানিটাইজ করার জন্য দুর্দান্ত তবে সিএসএস নয়। সুতরাং আপনি সিএসএস হ্যান্ডেল করতে অ্যাংুলারের সিএসএস স্যানিটাইজার সরবরাহ করতে পারেন:

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]আপনার এইচটিএমএলতে কেবল বৈশিষ্ট্যটি ব্যবহার করুন , নীচের মতো কিছু:

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

আপনার উপাদানটিতে কখনও এমন কিছু বৈশিষ্ট্য রয়েছে যার মধ্যে কিছু এইচটিএমএল মার্কআপ বা সত্তা রয়েছে যা আপনার টেম্পলেটে প্রদর্শন করতে হবে? .তিহ্যবাহী দ্বিখণ্ডতা কাজ করবে না, তবে অভ্যন্তরীণ এইচটিএমএল সম্পত্তি বাঁধাই উদ্ধারে আসে।

প্রত্যাশার মতো ব্যবহার করে {{myVal}} না ! এই করা হবে না মত এইচটিএমএল ট্যাগ কুড়ান <p>, <strong>ইত্যাদি এবং শুধুমাত্র স্ট্রিং যেমন পাস ...

আপনার উপাদানটিতে এই কোডটি রয়েছে তা কল্পনা করুন:

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

আপনি যদি ব্যবহার {{myVal}}করেন তবে আপনি এটি দর্শনে পাবেন:

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

তবে ব্যবহারটি [innerHTML]="myVal"ফলাফলটিকে প্রত্যাশার মতো করে তোলে:

Stackoverflow হয় সহায়ক!

Comments

আপনি যদি আপনার কনটেন্টটি ডিভ ছাড়াই চান তবে আপনার সামগ্রীটি কীভাবে প্রদর্শিত হবে? এটা কি সম্ভব?

— Ε Г И І И

Answer 11

আপনি শৈলীর জন্য একাধিক পাইপ প্রয়োগ করতে পারেন, 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);
    }
}

'এইচটিএমএল' স্যানিটাইজারের জন্য পাইপ

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 এইচটিএমএল-উপাদানসমূহ, যা আপনি এটি এইচটিএমএল-সামগ্রী programatically এর সেট করতে পারবেন একটি সম্পত্তি। এখানে একটি অভ্যন্তরীণ পাঠ্য সম্পত্তি রয়েছে যা সামগ্রীটিকে সরল পাঠ্য হিসাবে সংজ্ঞায়িত করে।

[attributeName]="value"বক্স বন্ধনী, গুণ পার্শ্ববর্তী একটি কৌণিক ইনপুট-বাঁধাই সংজ্ঞায়িত করে। এর অর্থ হ'ল, সম্পত্তিটির মান (আপনার ক্ষেত্রে অভ্যন্তরীণচটিএমএল) প্রদত্ত অভিব্যক্তির সাথে আবদ্ধ হয়, যখন অভিব্যক্তি-ফলাফল পরিবর্তন হয়, সম্পত্তি মানও পরিবর্তিত হয়।

সুতরাং মূলত [innerHtml]আপনাকে প্রদত্ত এইচটিএমএল-এলিমেন্টের এইচটিএমএল-কন্টেন্টকে গতিবদ্ধভাবে পরিবর্তন এবং পরিবর্তন করতে দেয়।

Answer 13

ইন কৌণিক 2 আপনি বাইন্ডিং 3 ধরনের করতে পারেন:

• [property]="expression"-> যে কোনও এইচটিএমএল সম্পত্তি
  প্রকাশের সাথে লিঙ্ক করতে পারে । এই ক্ষেত্রে, অভিব্যক্তি পরিবর্তন হলে সম্পত্তি আপডেট হবে, তবে এটি অন্যভাবে কাজ করে না।
• (event)="expression" -> ইভেন্টটি ক্রিয়াকলাপটি প্রকাশ করে।
• [(ngModel)]="property"-> সম্পত্তিটি জেএস (বা টিএস) থেকে এইচটিএমএল-তে সংযুক্ত করে। এই সম্পত্তি সম্পর্কিত কোনও আপডেট সর্বত্র লক্ষণীয় হবে।

একটি অভিব্যক্তি একটি মান, একটি গুণ বা একটি পদ্ধতি হতে পারে। উদাহরণস্বরূপ: '4', 'controller.var', 'getValue ()'

উদাহরণ এখানে

Answer 14

AngularJS v2.1.1 এ কাজ করা

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

Comments

এটি উত্পাদন করে: <div _ngcontent-luf-0=""></div>আমার জন্য। divখালি।

— স্কট মার্কাস

Answer 15

কৌণিক 2 ডকটিতে বর্ণিত হিসাবে ডিওমে উপাদানগুলি গতিশীলরূপে যুক্ত করার উপায়টি হল @ অ্যাঙ্গুলার / কোর থেকে ভিউকন্টেইনাররেফ ক্লাস ব্যবহার করে।

আপনাকে যা করতে হবে তা হ'ল একটি নির্দেশনা ঘোষণা করা যা ভিউকন্টেইনারআরফ বাস্তবায়ন করবে এবং আপনার ডিওমে একটি স্থানধারকের মতো কাজ করবে।

নির্দেশিকা

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 এ একটি সম্পূর্ণরূপে কাজ করা ডেমো অ্যাপ্লিকেশনটি ডায়নামিকভাবে ডিওএম ডেমোতে উপাদান যুক্ত করেছি

Answer 16

সমাধানটি অর্জন করতে আপনি বেশ কয়েকটি পদ্ধতি ব্যবহার করতে পারেন। অনুমোদিত উত্তরে যেমন ইতিমধ্যে বলা হয়েছে, আপনি ব্যবহার করতে পারেন:

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

আপনি যা অর্জন করতে চাইছেন তার উপর নির্ভর করে আপনি জাভাস্ক্রিপ্ট DOM এর মতো অন্যান্য জিনিসও চেষ্টা করতে পারেন (প্রস্তাবিত নয়, ডোম ক্রিয়াকলাপ ধীর):

উপহার

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

উপাদান

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

সম্পত্তি বাঁধাই

জাভাস্ক্রিপ্ট ডোম আউটার এইচটিএমএল

Comments

ডিওএম অপারেশনগুলি কৌণিকের চেয়ে কম ধীরে ধীরে হোক না কেন, এটি ব্যবহার করে getElementsByIdবা অন্য কোনও নির্বাচনের পদ্ধতি ব্যবহার করা খারাপ কারণ এটি একই আইডি (বা অন্যান্য মানদণ্ড) সহ উপাদানগুলি অন্তর্ভুক্ত করলে সম্পূর্ণ ভিন্ন উপাদানগুলির উপাদানগুলিকে ক্যাপচার করতে পারে।

— আভিয়াদ পি।

এছাড়াও এটি সম্পূর্ণভাবে কোনও কৌণিক-অঞ্চলের বাইরে সম্পাদন করে যাতে পরিবর্তনগুলি নেওয়া হবে না।

— ফিলিপ মেসনার

Answer 17

innerHTMLএইচটিএমএল গতিশীল সামগ্রী রেন্ডার জন্য আমরা সবসময় এইচটিএমএল বিষয়বস্তু সম্পত্তিতে প্রেরণ করতে পারি তবে সেই গতিশীল এইচটিএমএল সামগ্রীটিও সংক্রামিত বা দূষিত হতে পারে। তাই গতিশীল বিষয়বস্তুতে যাওয়ার আগে 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, সমস্ত জিনিস ছিন্ন হয়ে যেতে পারে এবং তাই এটি শুরু থেকে এটি ব্যবহার করা শুরু করা ভাল বা আপনি পরে খুব বিভ্রান্ত হবেন।

— সাইমন_উইভার

আমি যা বুঝতে পেরেছি তা হল এই স্ক্রিপ্টটি হ'ল সমস্ত দূষিত কন্টেন্টকে (বাইপাস সিকিউরিটি ট্রাস্টটিচটিএমএল) মঞ্জুরি দেওয়ার জন্য, আপনি যেমন এটি উল্লেখ করেছেন আমার মনে হয় আপনি যদি উত্সটিকে বিশ্বাস না করেন তবে এই পাইপটির প্রয়োজন হবে না। রেফারোটো: কৌণিক.ইও

— সায়ে

Answer 18

আপনি যদি এটি কৌনিক 2 বা কৌণিক 4 এ চান এবং ইনলাইন সিএসএস রাখতে চান তবে আপনি ব্যবহার করতে পারেন

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

Comments

এটি আমাকে একটি ত্রুটি দিয়েছে `অচেনা (প্রতিশ্রুতিতে): ত্রুটি: টেমপ্লেট বিশ্লেষণ ত্রুটিগুলি: পাইপ 'কিপ এইচটিএমএল' পাওয়া যায়নি`

— প্রবীণ

"@ কৌণিক / কোর" থেকে import পাইপ, পাইপ ট্রান্সফর্ম import আমদানি করুন;

— জে মোমায়া

Answer 19

আপনি নীচের মতো ক্যানোনিকাল ফর্ম ব্যবহার করে টেম্পলেট সহ কৌণিক উপাদান শ্রেণীর বৈশিষ্ট্যগুলিও আবদ্ধ করতে পারেন:

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

কৌণিক ডকুমেন্টেশন: https://angular.io/guide/template-syntax#property-binding-property

এখানে কাজের স্ট্যাকব্লিটজ উদাহরণ দেখুন

Answer 20

আপনার যদি কৌণিক (বা যে কোনও ফ্রেমওয়ার্ক) অ্যাপ্লিকেশনটিতে টেম্পলেট রয়েছে এবং আপনি এইচটিটিপি অনুরোধ / প্রতিক্রিয়াটির মাধ্যমে আপনার ব্যাকএন্ড থেকে এইচটিএমএল টেমপ্লেটগুলি ফেরত পাঠান, আপনি সম্মুখভাগ এবং ব্যাকএন্ডের মধ্যে টেমপ্লেটগুলি মিশ্রণ করছেন।

কেন কেবল টেম্প্লেটিংয়ের জিনিসগুলি সীমান্তে ছেড়ে দেওয়া হবে (আমি এটি প্রস্তাব করব), বা ব্যাকএন্ডে (সুন্দর অবতরণী ইমো)?

এবং যদি আপনি টেমপ্লেটগুলি সীমান্তে রাখেন তবে ব্যাকএন্ডে অনুরোধের জন্য কেন কেবল জেএসএনের সাথে সাড়া দিবেন না। এমনকি আপনাকে একটি বিশ্রাম কাঠামো বাস্তবায়ন করতে হবে না, তবে একদিকে টেমপ্লেটগুলি রাখা আপনার কোডটিকে আরও স্বচ্ছ করে তোলে।

অন্য কেউ যখন আপনার কোডটি মোকাবেলা করতে হবে তখন এটি ফেরত দেবে (অথবা এমনকি আপনি নিজেই কিছুক্ষণ পরে নিজের কোডটি পুনরায় প্রবেশ করছেন)!

আপনি যদি এটি সঠিকভাবে করেন, আপনার কাছে ছোট টেম্পলেটগুলির সাথে ছোট ছোট উপাদান থাকবে এবং সর্বোপরি আপনার কোডটি যদি ইম্বা হয় তবে কোডিংয়ের ভাষা জানেন না এমন কেউ আপনার টেম্পলেট এবং আপনার যুক্তি বুঝতে সক্ষম হবে! সুতরাং অতিরিক্ত হিসাবে, আপনার ফাংশন / পদ্ধতিগুলি যতটা ছোট আপনি রাখতে পারেন keep অবশেষে আপনি খুঁজে পাবেন যে বৃহত ফাংশন / পদ্ধতি / ক্লাসগুলির তুলনায় বৈশিষ্ট্যগুলি বজায় রাখা, পুনরায় সংশোধন করা, পর্যালোচনা করা এবং যুক্ত করা আরও সহজ হবে এবং সীমান্ত এবং ব্যাকএন্ডের মধ্যে টেম্প্লেটিং এবং যুক্তি মিশ্রিত করে - এবং ব্যাকএন্ডে যতটা যুক্তি রাখবেন যদি আপনার ফ্রন্টএন্ডটি আরও নমনীয় হওয়া প্রয়োজন (যেমন অ্যান্ড্রয়েড ফ্রন্ট্যান্ডেড লিখতে বা অন্য কোনও ফ্রন্টএন্ড ফ্রেমওয়ার্কে স্যুইচ করা)।

দর্শন, মানুষ :)

PS: আপনাকে ১০০% পরিষ্কার কোড প্রয়োগ করতে হবে না, কারণ এটি অত্যন্ত ব্যয়বহুল - বিশেষত যদি আপনাকে দলের সদস্যদের অনুপ্রাণিত করতে হয়;) তবে: আপনার ক্লিনার কোডের সাথে একটি পদ্ধতির এবং আপনার কাছে যা আছে তার মধ্যে একটি ভাল ভারসাম্য খুঁজে পাওয়া উচিত (সম্ভবত এটি হতে পারে) ইতিমধ্যে বেশ পরিষ্কার)

আপনি যদি পারেন এবং বইটি আপনার আত্মায় প্রবেশ করতে পারেন তবে এটি পরীক্ষা করুন: https://de.wikedia.org/wiki/Clean_Code

Comments

কখনও কখনও আপনি যখন SOAP এর মতো পুরানো এপিআইয়ের সাথে ডিল করেন তখন সার্ভার দিক থেকে এইচটিএমএল পাওয়া দরকার। আমি বিএসসির (ভারত স্টক এক্সচেঞ্জ) সাথে আমার একটি প্রকল্পে কাজ করছিলাম এবং তারা অর্থ প্রদানের সময় ব্যাঙ্ক পৃষ্ঠার এইচটিএমএল কোডটি ফেরত দেয়। সুতরাং আপনি তাদের এপিআই পরিবর্তন করতে পারবেন না আপনি সেই অনুযায়ী আপনার কোড আপডেট করেছেন।

— মহেন্দ্র ওয়েকোস

আপনি এমন মিডলওয়্যার লিখতে পারেন যা ঘন ঘন সাবান এপিআই সম্পর্কে জিজ্ঞাসা করে এবং উদাহরণস্বরূপ একটি সকেটে উত্তোলিত ফলাফল সরবরাহ করে। সাবানের মাধ্যমে তথ্য গ্রহণ এবং আহরণ করা ব্যথা হতে পারে।

— গুট্রাম

কাঁচা মার্কআপের জন্য সত্যিকারের বৃহত স্পষ্ট ব্যবহারের কেসটি যখন আপনার মার্কআপটি কোনও সিএমএস থেকে আসে এবং ডাব্লুওয়াইএসআইডাব্লুওয়াইজি সম্পাদকতে লেখা হয়। উদাহরণস্বরূপ আপনি একটি মাথা বিহীন সিএমএস থেকে একাধিক প্রান্তকে পরিবেশন করতে পারেন। এই ধরণের জিনিস হ'ল প্রতিটি টেম্প্লেটিং ইঞ্জিনে কাঁচা মার্কআপের বিকল্প রয়েছে।

— gburton