এনজি-ডিপ এর জায়গায় কী ব্যবহার করবেন

Question 1

আমি রাউটার আউটলেট দ্বারা কৌনিক মধ্যে স্থাপন করা একটি উপাদান স্টাইল করার চেষ্টা করছি এবং নিশ্চিত করতে চাই যে উত্পন্ন উপাদানটি 100% প্রস্থ হয়ে যায়

বেশিরভাগ জবাব থেকে, আমি দেখছি যে আমার ::ng-deepনির্বাচকটি ব্যবহার করা উচিত , তবে অ্যাংুলারের ডক্স থেকে এটি হ্রাস করা হচ্ছে। এর বিকল্প আছে কি ::ng-deep?

Question 2

এফডাব্লুআইডাব্লু আমার গবেষণায় আমি এনজি-ডিপ বা অন্যান্য প্রযোজ্য বিকল্পগুলির কোনও প্রতিস্থাপন খুঁজে পাইনি। এটি কারণ, আমি বিশ্বাস করি, কৌণিক দলটি ছায়া ডোমের উপর ডাব্লু 3 সি অনুচ্ছেদে পিছিয়ে যাচ্ছে, যার প্রথমদিকে নির্বাচক ছিল deep। যাইহোক, ডাব্লু 3 সি এর পরে থেকে প্রস্তাবটি সরিয়ে নিয়েছে, তবে এটি কোনও নতুন দিয়ে প্রতিস্থাপন করে নি। যতক্ষণ না ঘটে ততক্ষণ আমি কল্পনা করি যে কৌণিক দলটি রাখবে ::ng-deepএবং এর বিকল্পগুলি পাওয়া যাবে, তবে ডাব্লু 3 সি এর খসড়াগুলির বিচারাধীন অবস্থার কারণে অবহেলিত অবস্থায় রয়েছে। এখনই এটি ব্যাক আপ করার জন্য ডকুমেন্টেশনগুলি সন্ধান করতে আমি সময় নিতে পারছি না তবে আমি সম্প্রতি তা দেখেছি।

দীর্ঘ গল্প সংক্ষিপ্ত: ব্যবহার চালিয়ে যান ::ng-deep প্রতিস্থাপন তৈরি হওয়া অবধি এবং এর বিকল্পগুলি অব্যাহত - অবচয় হ'ল একটি প্রাথমিক বিজ্ঞপ্তি যাতে প্রকৃত পরিবর্তনটি যখনই বাস্তবায়িত হয় তখন লোকেরা অন্ধ হয়ে না যায়।

- আপডেট -

https://drafers.csswg.org/css-scoping-1/ আপনার আগ্রহী হলে এই খসড়া প্রস্তাবটি এখানে দেওয়া হল। দেখা যাচ্ছে যে তারা ছায়া ডোম গাছের মধ্যে থাকা উপাদানগুলির জন্য নির্বাচকদের একটি শক্তিশালী সেটে কাজ করছেন; এটি এই অনুমান, একবার অনুমোদিত, আমি মনে করি যে কৌণিক ক্লোনটি অবহিত করবে, এমনকি যদি এমন একটি থাকে (যেমন কৌণিকগুলি ব্রাউজারগুলিতে লাইভ হয়ে যাওয়ার পরে তাদের নিজস্ব নির্বাচকগুলি প্রয়োগ করার প্রয়োজন নাও পারে)।

Question 3

অবহেলিতকে বাইপাস করতে ::ng-deep, আমি সাধারণত অক্ষম করি ViewEncapsulation। যদিও এটি সেরা পদ্ধতির নয়, এটি আমার ভালভাবে পরিবেশন করেছে।

অক্ষম করতে ViewEncapsulation, আপনার উপাদানগুলিতে নিম্নলিখিতটি করুন:

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  encapsulation: ViewEncapsulation.None
})

export class HeaderComponent {

}

এটি পুরো উপাদানটিতে এই উপাদানটিতে। এসএসএস শৈলী তৈরি করবে। শৈলগুলি পিতামাতা ও ভাইবোন উপাদানগুলিতে শৃঙ্খলে যেতে না দেওয়ার জন্য, নির্বাচকের সাথে পুরো স্কেসটি এমনভাবে মোড়ানো:

app-header {
  // your styles here and any child component styles can go here
}

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

আমি বলছি উপরের অনুচ্ছেদের কারণে এটি সর্বোত্তম পন্থা নয়, তবে এটি আমাকে ভালভাবে উপস্থাপন করেছে।

Question 4

গভীর শৈলীর সহজ এবং সহজ বিকল্প হ'ল অভিভাবক উপাদানটির উপাদান নির্বাচক ব্যবহার করে একটি সাধারণ শৈলী। তাই আপনার যদি নায়ক-বিবরণ ডটকম ডেস্কটপ।

:host ::ng-deep h3 {
  font-style: italic;
}

এটি স্টাইলস সিএসএসে এটি হয়ে উঠবে:

app-hero-details h3 {
  font-style: italic;
}

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

Question 5

যেমন কেউ আগে বলেছে, আপনি যদি কোনও তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করেন তবে ::ng-deepএকবারে একবার ব্যবহার করা এড়ানো কার্যত অসম্ভব । ::ng-deepব্রাউজারগুলির দ্বারা আর সমর্থিত হয়ে উঠলে আপনি আপনার পূর্ববর্তী প্রকল্পগুলি সম্পর্কে কী করতে চলেছেন ?

এই মুহুর্তের জন্য প্রস্তুত হতে আমি নীচের পরামর্শ দেব:

ব্যবহারের ViewEncapsulation.None বিজ্ঞতার সঙ্গে। যা কেবল সেই উপাদানগুলির জন্য অনুবাদ করে যা গভীর উপাদানগুলিতে অ্যাক্সেস করতে হবে।

@Component({
      selector: 'app-example',
      templateUrl: './example.component.html',
      styleUrls: ['./example.component.scss'],
      encapsulation: ViewEncapsulation.None
    })

এখন, সংঘর্ষ এবং CSS অদ্ভুততা এড়াতে আপনার (নিয়ম হিসাবে) সর্বদা আপনার উপাদানগুলির টেম্পলেটটি কোনও শ্রেণীর সাথে আবৃত করা উচিত । সুতরাং, উদাহরণ.component.html এর মতো হওয়া উচিত:

<section class="app-example-container">
<!-- a third party component -->
<mat-tab-group>
<mat-tab label="First"></mat-tab>
<mat-tab label="Second"></mat-tab>
</mat-tab-group>
</section>

আবার নিয়ম অনুসারে, প্রতিটি একক এসএসএসএস ফাইলের প্রথম লাইনটি উপাদান ধারককে লক্ষ্য করবে। যেহেতু কোনও এনক্যাপসুলেশন নেই আপনি তৃতীয় পক্ষের উপাদানগুলি তাদের ক্লাসগুলি লক্ষ্য করে পরিবর্তন করতে পারবেন। এটি বলেছে, example.componal.scss এর মতো হওয়া উচিত:

.app-example-container {
/* All the CSS code goes here */
.mat-tab-group .mat-tab-label {color: red;}
}

Question 6

এটি :: এনজি-গভীরের জন্য সাধারণ প্রতিস্থাপন নয়, তবে প্রশ্ন লেখকের দ্বারা বর্ণিত ব্যবহারের ক্ষেত্রে:

বিশেষ ক্ষেত্রে যেখানে আপনি রাউটার-আউটলেট দ্বারা সন্নিবেশ করা উপাদানটি স্টাইল করতে চান সেখানে সিএসএসে সংলগ্ন প্রতিবেশী নির্বাচনকারীকে ব্যবহার করে একটি মার্জিত সমাধান রয়েছে:

router-outlet+* {
  /* styling here... */
}

এটি এমন সমস্ত উপাদানগুলিতে প্রযোজ্য যা রাউটার-আউটলেটের প্রত্যক্ষ প্রতিবেশী।

আরও পড়ুন:
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
https://angular.io/guide/router#router-outlet

Question 7

ডিফল্ট এনক্যাপসুলেশন পরিবর্তন এড়াতে, আমি একটি সহায়ক লিখেছি যা উপাদানটির জন্য গ্লোবাল শৈলী যুক্ত করে:

ডিপস্টাইল.টিএস

import { ViewContainerRef } from '@angular/core';

export function deepStyle(vcr: ViewContainerRef, csss: string[]){
    let id = 'deep-' + vcr.element.nativeElement.tagName;
    let styleElement = document.getElementById('pierce-' + vcr.element.nativeElement.name);
    if(!styleElement){
        styleElement = document.createElement('style');
        styleElement.id = id;
        styleElement.innerHTML = csss.map(css => vcr.element.nativeElement.tagName + ' ' + css).join('\n');
        document.head.append(styleElement);
    }
}

আমার-উপাদান.ts

import { Component, ViewContainerRef } from '@angular/core';
import { deepStyle } from '../deepStyle';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})
export class MyComponent {
   constructor(vcr: ViewContainerRef) {
    deepStyle(vcr, [`
       img {
         height: 180px;
       }
    `]);
  }
}

ফলাফল:

<head>
...
<style id="deep-MY-COMPONENT">
    MY-COMPONENT img {
      height: 180px;
    }
</style>
...
</head>

Question 8

আপনি "/ গভীর /" ব্যবহার করতে পারেন। এটি :: এনজি-ডিপ বিকল্প।

:host /deep/ h3 {
  font-style: italic;
}