কৌণিক 2 - অভ্যন্তরীণ এইচটিএমএল স্টাইলিং

170

আমি এইচটিটিপি কলগুলি থেকে বেশ কয়েকটি এইচটিএমএল কোড পাচ্ছি। আমি এইচটিএমএল ব্লকগুলিকে একটি ভেরিয়েবলের মধ্যে রেখেছি এবং এটি আমার পৃষ্ঠায় [অভ্যন্তরীণ এইচটিএমএল] দিয়ে সন্নিবেশ করেছি তবে আমি iোকানো এইচটিএমএল ব্লকটি স্টাইল করতে পারি না। আমি কীভাবে এটি অর্জন করতে পারি তার কোনও পরামর্শ আছে?

@Component({selector: 'calendar',
template: '<div [innerHTML]="calendar"></div>',
providers:[HomeService], 
styles: [` 
h3 {color:red;}
`})

আমি যে এইচটিএমএলকে স্টাইল করতে চাই তা হ'ল ভেরিয়েবল "ক্যালেন্ডারে" অন্তর্ভুক্ত block

angular innerhtml

— জ্যাকব সুইভেনসন
সূত্র

স্টাইল কোথা থেকে? উপাদানগুলির মধ্যে থেকে বা স্টাইলগুলি থেকে যুক্ত index.html?

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

তুমি কি বলতে চাচ্ছো can not style the inserted HTML block? কোডের ছোট ছোট স্নিপেট সহ এটির জন্য কী করেছে তা আমাদের দেখান।

— মাইক্রোনিক্স

একটি কোড স্নিপেট সহ আমার পোস্ট আপডেট হয়েছে! :) ধন্যবাদ

— যাকোব সোভেনিংসন

1

আমি আমার উত্তরে একটি Plunker লিঙ্ক যুক্ত করেছি

— Günter Zöchbauer

@ গন্টেরজ্যাচবাউয়ার এইচটিএমএল কোডগুলিতে ইনলাইন সিএসএস থাকলে কী হবে? কীভাবে এটি রেন্ডার হবে?

— ইনিরাভপেটেল

320

আপডেট 2 ::slotted

::slotted এখন সমস্ত নতুন ব্রাউজার দ্বারা সমর্থিত এবং এর সাথে ব্যবহার করা যেতে পারে ViewEncapsulation.ShadowDom

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

আপডেট 1 :: এনজি-ডিপ

/deep/ অবচিত ও প্রতিস্থাপিত হয়েছিল ::ng-deep ।

::ng-deep ইতিমধ্যে অবচয় হিসাবে চিহ্নিত হয়েছে, তবে এখনও কোনও প্রতিস্থাপন পাওয়া যাচ্ছে না।

যখন ViewEncapsulation.Nativeসমস্ত ব্রাউজারগুলি যথাযথভাবে সমর্থিত হয় এবং ছায়া DOM সীমানা জুড়ে স্টাইলিং সমর্থন করে,::ng-deep সম্ভবত এটি বন্ধ হয়ে যাবে।

মূল

কৌণিক এইচটিএমএলে সমস্ত ধরণের সিএসএস ক্লাস যুক্ত করে এটি ডিওএমে যোগ করে ছায়া ডিওএম সিএসএস এনক্যাপসুলেশন অনুকরণ করে উপাদানগুলির ভিতরে এবং বাইরে স্টাইল রক্তপাত রোধ করতে। কৌনিকটি এই যোগ করা ক্লাসগুলির সাথে মেলে আপনার যুক্ত করা সিএসএসও পুনর্লিখন করে। এইচটিএমএল ব্যবহার করে যুক্ত করা হয়েছে[innerHTML] এই ক্লাসগুলি হয় না এবং পুনর্লিখিত সিএসএস মেলে না।

একটি workaround চেষ্টা হিসাবে

সিএসএসের জন্য উপাদানটিতে যুক্ত

/* :host /deep/ mySelector { */
:host ::ng-deep mySelector { 
  background-color: blue;
}

সিএসএসের জন্য যুক্ত index.html

/* body /deep/ mySelector { */
body ::ng-deep mySelector {
  background-color: green;
}

>>>(এবং সমতুল্য /deep/তবে SASS এর /deep/সাথে আরও ভাল কাজ করে) এবং ::shadow2.0.0-beta.10 এ যুক্ত হয়েছিল। এগুলি ছায়া ডোম সিএসএস কম্বিনেটরগুলির সাথে সমান (যা encapsulation: ViewEncapsulation.Emulatedঅবনমিত হয় ) এবং কেবল এঙ্গুলার 2-এ ডিফল্ট হিসাবে কাজ করে । এগুলি সম্ভবত এগুলির সাথেও কাজ করে ViewEncapsulation.Noneতবে কেবল এগুলি এড়ানো হয় কারণ এগুলি প্রয়োজনীয় নয়। ক্রস-উপাদান স্টাইলিংয়ের জন্য আরও উন্নত বৈশিষ্ট্যগুলি সমর্থন না করা পর্যন্ত এই সংযুক্তকারীগুলি কেবলমাত্র একটি মধ্যবর্তী সমাধান are

আরেকটি পন্থা ব্যবহার করা হয়

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
})

আপনার সিএসএসকে অবরুদ্ধ করে এমন সমস্ত উপাদানগুলির জন্য (আপনি সিএসএসটি কোথায় যুক্ত করেন এবং এইচটিএমএলটি যেখানে আপনি স্টাইল করতে চান - তার উপর নির্ভর করে যা আপনার অ্যাপ্লিকেশনের সমস্ত উপাদান হতে পারে )

হালনাগাদ

Plunker উদাহরণ

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

6

কারও কাছে কেবল একটি নোট, এটি নোড-স্যাসের সাথে বা স্টাইল ইউআরএল দিয়ে কাজ করে না। কেবল শৈলীতে: [...]

— থিলিহা

12

/deep/>>>

— SASS এর

1

আপনার লিখিত সামগ্রীতে নির্দেশনা বা সংযোজন থাকতে পারেinneeHTML

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

1

এইচটিটিপি কল সরবরাহিত এইচটিএমএল যদি বড় হয় এবং এটির শৈলী পূর্বনির্ধারিত না হওয়ায় এটি কীভাবে সম্ভব হবে তা আমি কেবল ইনলাইন সিএসএস থেকে পেয়ে যাচ্ছি @ গন্তেরজ্যাচবাউয়ার

— ইনরাভপ্যাটেল

1

কৌনিক 8 এ দিনটি বাঁচাল! ধন্যবাদ। এই উত্তরটি খুঁজে পেতে সঠিক প্রশ্নটি পাওয়া শক্ত!

— পিয়ানোম্যান

12

আপনার যে সহজ সমাধানটি অনুসরণ করা দরকার তা হ'ল

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

constructor(private sanitizer: DomSanitizer){}

transformYourHtml(htmlTextWithStyle) {
    return this.sanitizer.bypassSecurityTrustHtml(htmlTextWithStyle);
}

— সাহিল রালকার
সূত্র

2

যদি আপনি একটি কৌণিক উপাদানটির মধ্যে গতিশীলভাবে যুক্ত এইচটিএমএল উপাদানগুলি স্টাইল করার চেষ্টা করছেন তবে এটি সহায়ক হতে পারে:

// inside component class...

constructor(private hostRef: ElementRef) { }

getContentAttr(): string {
  const attrs = this.hostRef.nativeElement.attributes
  for (let i = 0, l = attrs.length; i < l; i++) {
    if (attrs[i].name.startsWith('_nghost-c')) {
      return `_ngcontent-c${attrs[i].name.substring(9)}`
    }
  }
}

ngAfterViewInit() {
  // dynamically add HTML element
  dynamicallyAddedHtmlElement.setAttribute(this.getContentAttr(), '')
}

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

— ট্রেভর
সূত্র

2

আমরা আমাদের সিএমএস থেকে প্রায়শই কন্টেন্ট টানছি [innerHTML]="content.title"। আমরা styles.scssউপাদানটির এসএসএস ফাইলের চেয়ে অ্যাপ্লিকেশনটির রুট ফাইলে প্রয়োজনীয় ক্লাস রাখি। আমাদের সিএমএস ইচ্ছাকৃতভাবে ইন-লাইন স্টাইলগুলি সরিয়ে দেয় যাতে লেখকরা তাদের বিষয়বস্তুতে লেখকরা ব্যবহার করতে পারেন এমন অবশ্যই আমাদের অবশ্যই তৈরি করা ক্লাস থাকতে হবে। মনে রাখবেন {{content.title}}টেমপ্লেটে ব্যবহার করা সামগ্রী থেকে এইচটিএমএল রেন্ডার করবে না।

— Lyfo
সূত্র

-3

আপনি যদি স্টাইল প্রিপ্রোসেসর হিসাবে স্যাস ব্যবহার করছেন, আপনি দেব নির্ভরতার জন্য নেটিভ সাস সংকলকটিতে ফিরে যেতে পারেন:

npm install node-sass --save-dev

যাতে আপনি উন্নয়নের জন্য / গভীর / ব্যবহার চালিয়ে যেতে পারেন।

— ব্রায়ান লু
সূত্র