css - কীভাবে এবং কোথায় ব্যবহার করতে হবে:: এনজি-ডিপ?




angular angular-template (4)

আমি কৌণিক 4 এ নতুন, সুতরাং কেউ কীভাবে এবং কোথায় ব্যবহার করতে হবে তা ব্যাখ্যা করতে পারে: কৌনিক 4 এ ::ng-deep ?

প্রকৃতপক্ষে আমি পিতা বা মাতা উপাদানগুলি থেকে সন্তানের উপাদানগুলির কয়েকটি সিএসএস বৈশিষ্ট্য ওভাররাইট করতে চাই। তাছাড়া এটি আই 11 এ সমর্থিত?


আমি পিতামাতাকে একটি এনপ্যাপুলেটেড সিএসএস শ্রেণিতে আবশ্যক করে কেবলমাত্র কোনও উপাদানগুলির শিশুদের মধ্যে ::ng-deep সীমাবদ্ধ করার গুরুত্বকে জোর দেব।

এটি কাজ করার জন্য পিতামাতার পরে ::ng-deep ব্যবহার করা জরুরী, অন্যথায় পূর্বে নয়, উপাদানটি লোড হওয়ার মুহুর্তে এটি একই নামের সাথে সমস্ত শ্রেণিতে প্রয়োগ করা হবে।

উপাদান সিএসএস:

.my-component ::ng-deep .mat-checkbox-layout {
    background-color: aqua;
}

উপাদান টেমপ্লেট:

<h1 class="my-component">
    <mat-checkbox ....></mat-checkbox>
</h1>

সিএসএসের ফলাফল:

.my-component[_ngcontent-c1] .mat-checkbox-layout {
    background-color: aqua;
}

কেবলমাত্র একটি আপডেট:

আপনার ::ng-deep ব্যবহার করা উচিত /deep/ পরিবর্তে যা অবনমিত বলে মনে হচ্ছে।

প্রতি ডকুমেন্টেশন:

ছায়া-ছিদ্রকারী বংশধর সংমিশ্রককে অবহেলা করা হয়েছে এবং বড় ব্রাউজার এবং সরঞ্জামগুলি থেকে সমর্থন সরানো হচ্ছে। এর মতো আমরা কৌণিক সমর্থন (/ 3 / গভীর /, >>> এবং :: এনজি-গভীরের 3 এর জন্য) ছেড়ে দেওয়ার পরিকল্পনা করি। ততক্ষণ :: এনজি-ডিপকে সরঞ্জামগুলির সাথে বিস্তৃত সামঞ্জস্যের জন্য পছন্দ করা উচিত।

আপনি এটি https://angular.io/guide/component-styles খুঁজে পেতে পারেন


::ng-deep , >>> এবং /deep/ আপনাকে ডিওএম উপাদানগুলিতে অ্যাক্সেস দিচ্ছে, যা আপনার উপাদানগুলির এইচটিএমএলে নেই। উদাহরণস্বরূপ, আপনি যদি কৌণিক উপাদান ব্যবহার করছেন তবে আপনার উপাদানগুলির ক্ষেত্রের বাইরে কৌণিক উপাদান দ্বারা কিছু উপাদান উত্পন্ন হয় (যেমন dialog ) এবং আপনি নিয়মিত CSS উপায় ব্যবহার করে এই উপাদানগুলিতে অ্যাক্সেস করতে পারবেন না। আপনি যদি এই উপাদানগুলির শৈলী পরিবর্তন করতে চান তবে আপনাকে এই তিনটি জিনিসের একটি ব্যবহার করতে হবে, উদাহরণস্বরূপ:

::ng-deep .mat-dialog {
  /* styles here */
}

আপাতত >>> এবং /deep/ অবচয় করা হয়েছে, সুতরাং আরও ভাল ব্যবহার করুন ::ng-deep

হালনাগাদ

"গভীর" ম্যানিপুলেশনগুলি আসলে খুব হ্রাস করা হয়, এবং এই পদ্ধতি অনুসরণ করার আগে, আমি আপনাকে সিএসএস এনক্যাপসুলেশন পদ্ধতির অক্ষম করার বিষয়ে একবার নজর দেওয়ার পরামর্শ দিচ্ছি (যা খুব আদর্শ নয়) এবং সিদ্ধান্ত নিন, কোন ক্ষেত্রে আপনার ক্ষেত্রে ভাল better আপনি যদি এনক্যাপসুলেশন নিষ্ক্রিয় করার সিদ্ধান্ত নিয়ে থাকেন তবে এটি অর্জন করা সত্যিই সহজ:

@Component({
  selector: '',
  template: '',
  styles: [''],
  encapsulation: ViewEncapsulation.None  // Use to disable CSS Encapsulation for this component
})

আপনি this নিবন্ধে আরও তথ্য সন্ধান করতে পারেন।


:host-context যা উপরের: কৌনিক গাইডের মধ্যে ::ng-deep : https://angular.io/guide/component-styles घटक-styles ::ng-deep ব্যাখ্যাটি মিস করবেন না তা নিশ্চিত করুন। দাবি অস্বীকার: আমি এখন অবধি এটি মিস করেছি এবং আশা করি আমি এটি শীঘ্রই দেখতে পেতাম।

::ng-deep প্রায়শই প্রয়োজনীয় হয় যখন আপনি উপাদানটি লেখেন নি এবং এর উত্সটিতে অ্যাক্সেস নেই, তবে :host-context আপনি যখন ব্যবহার করেন তখন খুব কার্যকর বিকল্প হতে পারে।

উদাহরণস্বরূপ, আমার নকশা করা কোনও উপাদানটির ভিতরে আমার একটি কালো <h1> শিরোনাম রয়েছে এবং একটি অন্ধকার থিমযুক্ত পটভূমিতে প্রদর্শিত হওয়ার পরে আমি এটি সাদাতে পরিবর্তন করার ক্ষমতা চাই।

যদি উত্সটিতে আমার অ্যাক্সেস না থাকে তবে পিতামাতার জন্য সিএসএসে আমার এটি করতে হতে পারে:

.theme-dark widget-box ::ng-deep h1 { color: white; }

তবে এর পরিবর্তে :host-context আপনি উপাদানটির ভিতরে এটি করতে পারেন।

 h1 
 {
     color: black;       // default color

     :host-context(.theme-dark) &
     {
         color: white;   // color for dark-theme
     }

     // OR set an attribute 'outside' with [attr.theme]="'dark'"

     :host-context([theme='dark']) &
     {
         color: white;   // color for dark-theme
     }
 }

এটি .theme-dark জন্য উপাদান চেইনের যে কোনও জায়গায় দেখতে পাবেন এবং সন্ধান .theme-dark তে CSS প্রয়োগ করুন। এটি ::ng-deep উপর খুব বেশি নির্ভর করার জন্য একটি ভাল বিকল্প যা প্রায়শই প্রয়োজন হয় কিছুটা অ্যান্টি-প্যাটার্নের জন্য।

এই ক্ষেত্রে & এর পরিবর্তে h1 দ্বারা প্রতিস্থাপন করা হয়েছে (এটি সাস / এসএসএস কীভাবে কাজ করে) তাই আপনি একে অপরের পাশে আপনার 'সাধারণ' এবং থিমযুক্ত / বিকল্প সিএসএস সংজ্ঞায়িত করতে পারেন যা খুব সহজ।

সঠিক নম্বর পেতে সাবধান হন : ::ng-deep জন্য দুটি এবং এর জন্য :host-context কেবল একটি।





angular-template