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

Question 1

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

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

Question 2

সাধারণত /deep/ “shadow-piercing”সংযুক্তকারী একটি শৈলীতে বাধ্য করতে ব্যবহার করা যেতে পারে child components। এই নির্বাচকটির একটি নাম >>> ছিল এবং এখন তার আর একটি নাম আছে :: এনজি-ডিপ।

যেহেতু /deep/ combinatorঅবহেলা করা হয়েছে, এটি ব্যবহারের জন্য প্রস্তাবিত::ng-deep

উদাহরণ স্বরূপ:

<div class="overview tab-pane" id="overview" role="tabpanel" [innerHTML]="project?.getContent( 'DETAILS')"></div>

এবং css

.overview {
    ::ng-deep {
        p {
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

এটি সন্তানের উপাদানগুলিতে প্রয়োগ করা হবে

Question 3

ব্যবহার

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

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

আপাতত কৌণিক দল কেবলমাত্র এমওলিয়েটেড ভিউ এনক্যাপসুলেশন দিয়ে "গভীর" ম্যানিপুলেশনগুলি তৈরি করার পরামর্শ দেয় ।

অবকাশ

"গভীর" হেরফেরের আসলে অবচিত খুব, কিন্তু এটি এখন জন্য কাজ স্থির, কারণ কৌণিক প্রাক প্রক্রিয়াকরণ সমর্থন করে (প্রত্যাখ্যান করার নলখাগড়া না ::ng-deep, আজ কটাক্ষপাত করা থামিয়ে দেওয়া চর্চা প্রথম)।

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

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

আপনি এই নিবন্ধে ভিউ এনক্যাপসুলেশন সম্পর্কে আরও তথ্য সন্ধান করতে পারেন ।

Question 4

আমি ::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;
}

সম্পাদনা:

:hostনতুন সিএসএস ক্লাস তৈরির পরিবর্তে কীওয়ার্ড ব্যবহার করে আপনি একই আচরণ অর্জন করতে পারেন ।

:host ::ng-deep .mat-checkbox-layout

Question 5

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

::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এবং যদি পাওয়া যায় তবে এইচ 1 তে সিএসএস প্রয়োগ করবে। এটি খুব বেশি নির্ভর করার জন্য একটি ভাল বিকল্প ::ng-deepযার উপর প্রায়শই প্রয়োজন হয় কিছুটা অ্যান্টি-প্যাটার্ন।

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

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

Question 6

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

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

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

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

আপনি এটি এখানে খুঁজে পেতে পারেন

Question 7

সতর্কতার সাথে :: এনজি-গভীর ব্যবহার করুন। আমি আমার অ্যাপ্লিকেশন জুড়ে এটি ব্যবহার করেছি কেবলমাত্র অ্যাপ্লিকেশন জুড়ে উপাদান ডিজাইনের সরঞ্জামদণ্ডের রঙকে বিভিন্ন রঙে সেট করতে যখন অ্যাপটি সরঞ্জামদণ্ডের রঙগুলি একে অপরের দিকে ধাপে পরীক্ষা করছিল testing এটি অনুসন্ধানে আসুন কারণ এই শৈলীগুলি বিশ্বব্যাপী হয়ে ওঠে, এই নিবন্ধটি দেখুন এখানে একটি কার্য কোড কোড সমাধান যা অন্য উপাদানগুলিতে রক্তপাত হয় না।

<mat-toolbar #subbar>
...
</mat-toolbar>

export class BypartSubBarComponent implements AfterViewInit {
  @ViewChild('subbar', { static: false }) subbar: MatToolbar;
  constructor(
    private renderer: Renderer2) { }
  ngAfterViewInit() {
    this.renderer.setStyle(
      this.subbar._elementRef.nativeElement, 'backgroundColor', 'red');
  }

}