প্যারেন্ট উপাদানগুলির সিএসএস ফাইল থেকে শিশু উপাদানগুলি কীভাবে স্টাইল করবেন?

Question

আমি একটি পিতামন্ডল উপাদান পেয়েছি:

<parent></parent>

এবং আমি এই গোষ্ঠীটি শিশু উপাদানগুলি সহ পপুলিট করতে চাই:

<parent>
  <child></child>
  <child></child>
  <child></child>
</parent>

মূল টেমপ্লেট:

<div class="parent">
  <!-- Children goes here -->
  <ng-content></ng-content>
</div>

শিশু টেমপ্লেট:

<div class="child">Test</div>

যেহেতু parentএবং childদুটি পৃথক উপাদান, তাদের স্টাইলগুলি তাদের নিজস্ব স্কোপে লক হয়ে আছে।

আমার পিতামাতার অংশে আমি চেষ্টা করেছি:

.parent .child {
  // Styles for child
}

কিন্তু .childস্টাইলগুলি childউপাদানগুলিতে প্রয়োগ হচ্ছে না ।

স্কোপ সমস্যা সমাধানের জন্য আমি স্টাইলশিটটিকে উপাদানগুলিতে styleUrlsঅন্তর্ভুক্ত করার চেষ্টা করেছি :parentchild

// child.component.ts
styleUrls: [
  './parent.component.css',
  './child.component.css',
]

তবে এটি কোনও উপকারে আসে না, childস্টাইলশিটটি আনার জন্য অন্যভাবে চেষ্টা করেছিল parentকিন্তু এটি কোনওরকমই কাজে লাগেনি ।

সুতরাং আপনি কীভাবে সন্তানের উপাদানগুলি পিতামাতার উপাদানগুলিতে অন্তর্ভুক্ত করেছেন are

Comments

আরও দেখুন stackoverflow.com/questions/34542143/...

— গুন্টার Zöchbauer

আমার একটি সম্পূর্ণরূপে দৃষ্টান্ত বান্ধব, কৌতুক-মুক্ত ভাবে দেখুন উত্তর ।

— আলেকজান্ডার আবাকুমভ

Answer 1

আপডেট - নতুন উপায়

এটা করবেন না, যদি আপনি এড়াতে পারেন। ডেভন সান মন্তব্যগুলিতে যেমন উল্লেখ করেছেন: এই বৈশিষ্ট্যটি সম্ভবত প্রত্যাখ্যান করা হবে।

আপডেট - আরও নতুন উপায়

কৌণিক 4.3.0 থেকে , সমস্ত ছিদ্রকারী CSS কম্বিনেটরদের অবচিত করা হয়েছিল। কৌণিক দলটি একটি নতুন সমন্বয়কারী চালু করেছে ::ng-deep (এখনও এটি পরীক্ষামূলক পর্যায়ে রয়েছে এবং পুরো এবং চূড়ান্ত পথে নয়) নীচে দেখানো হয়েছে,

ডেমো: https://plnkr.co/edit/RBJIszu14o4svHLQt563?p= পূর্বরূপ

styles: [
    `
     :host { color: red; }

     :host ::ng-deep parent {
       color:blue;
     }
     :host ::ng-deep child{
       color:orange;
     }
     :host ::ng-deep child.class1 {
       color:yellow;
     }
     :host ::ng-deep child.class2{
       color:pink;
     }
    `
],



template: `
      Angular2                                //red
      <parent>                                //blue
          <child></child>                     //orange
          <child class="class1"></child>      //yellow
          <child class="class2"></child>      //pink
      </parent>      
    `

---

পুরানো পথ

আপনি encapsulation modeএবং / অথবা ব্যবহার করতে পারেনpiercing CSS combinators >>>, /deep/ and ::shadow

কাজের উদাহরণ: http://plnkr.co/edit/1RBDGQ?p= পূর্বরূপ

styles: [
    `
     :host { color: red; }
     :host >>> parent {
       color:blue;
     }
     :host >>> child{
       color:orange;
     }
     :host >>> child.class1 {
       color:yellow;
     }
     :host >>> child.class2{
       color:pink;
     }
    `
    ],

template: `
  Angular2                                //red
  <parent>                                //blue
      <child></child>                     //orange
      <child class="class1"></child>      //yellow
      <child class="class2"></child>      //pink
  </parent>      
`

Comments

পিয়ারিং সিএসএস

— সংযুক্তকারীগুলিকে

কৌণিক দলটি :: এনজি-ডিপ পাশাপাশি সমর্থনও বাদ দেওয়ার পরিকল্পনা করেছে। তাদের দস্তাবেজগুলি থেকে: "ছায়া-ছিদ্রকারী বংশোদ্ভূত সংমিশ্রকটিকে অবমূল্যায়ন করা হয়েছে এবং বড় ব্রাউজার এবং সরঞ্জামগুলি থেকে সমর্থন সরানো হচ্ছে such যেমনটি আমরা কৌণিকালে সমর্থন ছেড়ে দেওয়ার পরিকল্পনা করি (/ গভীর /, >>> এর সমস্ত 3 এর জন্য এবং :: এনজি- গভীর)। ততক্ষণ: :: এনজি-ডিপকে সরঞ্জামগুলির সাথে আরও বিস্তৃত সামঞ্জস্যের জন্য পছন্দ করা উচিত "" angular.io/guide/compender-styles#deprecated-DP-- and-ng-दीप ।

— ডেভন স্যামস

যতক্ষণ না এটি কোনও গ্রহণযোগ্য উত্তর হিসাবে থাকবে, লোকেরা বিভ্রান্ত হবে। :: এনজি-ডিপ উপরের মন্তব্যে @ ডেভনস্যামস পয়েন্ট হিসাবে ব্যবহার করা উচিত নয়।

— Kostas Siabanis

::ng-deepএখন হ্রাস করা হয়েছে , আমি এটি ভবিষ্যতের অ্যাপ্লিকেশনগুলিতে ব্যবহার করার পরামর্শ দিচ্ছি না

— উইল্ট

বিকল্প সরবরাহ না করে কোনও কিছুর অবমূল্যায়ন করা সম্ভবত সেরা সমাধান নয়।

— তেহলিভি

Answer 2

আপডেট 3:

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

আপনার এই বিষয়ে কিছু অন্তর্দৃষ্টি থাকলে মন্তব্য করুন।

আপডেট 2:

যেহেতু /deep/এবং অন্যান্য সমস্ত ছায়া ছিদ্রকারী নির্বাচকরা এখন হ্রাস পেয়েছে। কৌণিক ড্রপ ::ng-deepযা বিস্তৃত সামঞ্জস্যের পরিবর্তে ব্যবহার করা উচিত।

হালনাগাদ:

অ্যাঙ্গুলার-সিএলআই ব্যবহার করার /deep/পরিবর্তে আপনার ব্যবহার করা দরকার >>>অন্যথায় এটি কাজ করবে না।

মূল:

অ্যাঙ্গুলার 2 এর গিথুব পৃষ্ঠায় গিয়ে "স্টাইল" এর জন্য এলোমেলো অনুসন্ধান করার পরে আমি এই প্রশ্নটি পেয়েছি: কৌণিক 2 - অভ্যন্তরীণ এইচটিএমএল স্টাইলিং

যা এতে যোগ করা হয়েছে এমন কিছু ব্যবহার করতে বলেছিল 2.0.0-beta.10, >>>এবং ::shadowনির্বাচকরা।

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

তাই সহজভাবে করছেন:

:host >>> .child {}

ইন parentএর স্টাইলশীট ফাইল ইস্যু সমাধান। দয়া করে নোট করুন, উপরের উদ্ধৃতিতে বর্ণিত হিসাবে, আরও উন্নত ক্রস-উপাদান স্টাইলিং সমর্থন না করা পর্যন্ত এই সমাধানটি কেবলমাত্র মধ্যবর্তী হয়।

Comments

দেখে মনে হচ্ছে যে তারা :: এনজি-ডিপ অ্যাঙ্গুলার.আইও

— জেদ রিচার্ডস

Answer 3

আপনার ব্যবহার করা উচিত নয় ::ng-deep, এটি হ্রাস করা হয়। কৌণিকর ক্ষেত্রে, পিতামাতার কাছ থেকে বাচ্চাদের উপাদানগুলির স্টাইলটি পরিবর্তন করার সঠিক উপায়টি ব্যবহার করা encapsulation(এর অর্থ বোঝার জন্য নীচের সতর্কতাটি পড়ুন):

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

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

এবং তারপরে, আপনি :: এনজি-ডিপ থেকে কোনও প্রয়োজন ছাড়াই সিএসএস ফর্মটিকে আপনার উপাদানটি সংশোধন করতে পারবেন

.mat-sort-header-container {
  display:flex;
  justify-content:center;
}

সতর্কতা: এটি করার ফলে আপনি এই উপাদানটি বিশ্বব্যাপী হওয়ার জন্য লিখছেন এমন সমস্ত CSS বিধি তৈরি হবে।

আপনার সিএসএসের সুযোগটি কেবলমাত্র এই উপাদানটিতে সীমাবদ্ধ করতে, আপনার উপাদানটির শীর্ষ ট্যাগটিতে একটি CSS শ্রেণি যুক্ত করুন এবং আপনার সিএসএসকে এই ট্যাগটিতে "ভিতরে" রাখুন:

template:
    <div class='my-component'>
      <child-component class="first">First</child>
    </div>,

এসএসএস ফাইল:

.my-component {
  // All your css goes in there in order not to be global
}

Comments

এটি সর্বোত্তম উত্তর আইএমও, কারণ এটি শীঘ্রই হ্রাস করা উচিত একটি কার্যকর বিকল্প ::ng-deep। সাধারণত, উপাদানগুলির যে কোনও উপায়ে নিজস্ব নির্বাচক রয়েছে ( <my-component>, <div my-component>ইত্যাদি) তাই কোনও বিশেষ শ্রেণি সহ মোড়কের উপাদানগুলির কোনও প্রয়োজন নেই।

— অ্যালেক্স ওয়াকার

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

— রাফিন

@ আরফিন ঠিক এই কারণেই আমি এই কৌশলটি ব্যবহারের প্রভাব এবং কীভাবে আপনার উপাদানটিতে একটি শীর্ষ সিএসএস ট্যাগ ব্যবহার করে "ম্যানুয়ালি encapsulate" করতে পারি তা বুঝতে আমার উত্তরে সতর্কতা যুক্ত করেছি

— টোনিও

@ টনিও - হ্যাঁ, সম্মত; আপনার চেয়ে সরাসরি অ্যালেক্সের কাছে জবাব দিচ্ছিল। তাঁর মন্তব্য, " সুতরাং একটি বিশেষ শ্রেণীর সাথে মোড়কের উপাদানটিরও প্রয়োজন নেই " আমাকে কিছুটা ভয় পেল। সম্ভবত কোনও নির্দিষ্ট পরিস্থিতির জন্য, তবে একটি কারণ রয়েছে কৌণিক এনক্যাপসুলেশন সমর্থনকারী সময় "অপচয়"। এই উত্তরটি নির্দিষ্ট ক্ষেত্রে কার্যকর একটি সমাধান, তবে আপনি যেমনটি বলেন, সাধারণভাবে সম্ভবত একটি বিপজ্জনক one ম্যাথিউবি এর সমাধান , উদাহরণস্বরূপ, এনক্যাপসুলেশন রাখার সময় বাচ্চাদের স্টাইল করে (তবে আপনার যদি একাধিক প্রজন্মের সন্তানের উপাদান থাকে তবে এটি সত্যিই অগোছালো হয়ে যায়)।

— রাফিন

Answer 4

দুঃখের সাথে দেখা যাচ্ছে যে / গভীর / নির্বাচক অবনতি হয়েছে (কমপক্ষে ক্রোমে) https://www.chromestatus.com/features/6750456638341120

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

আপনি আপনার সন্তানের কাছে একটি স্টাইলের জিনিসটি পাস করতে পারেন এবং এটির মাধ্যমে এটি প্রয়োগ
<div [attr.style]="styleobject">

করতে পারেন : বা আপনার যদি একটি নির্দিষ্ট শৈলী থাকে তবে আপনি এই জাতীয় কিছু ব্যবহার করতে পারেন:
<div [style.background-color]="colorvar">

এ সম্পর্কিত আরও আলোচনা: https://github.com/angular/angular/issues/6511

Answer 5

একই সমস্যা ছিল, সুতরাং যদি আপনি '>>>' এর পরিবর্তে 'এসএসএস / স্যাস ব্যবহার করুন' / গভীর / 'ব্যবহার করে কৌণিক 2-ক্লিপ ব্যবহার করেন তবে শেষ নির্বাচক এখনও সমর্থিত নয় (তবে CSS এর সাথে দুর্দান্ত কাজ করে)।

Answer 6

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

প্লাঙ্কার: https://plnkr.co/edit/ooBRp3ROk6fbWPuToytO?p= পূর্বরূপ

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

import {Component, NgModule } from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>I'm the host parent</h2>
      <child-component class="target1"></child-component><br/>
      <child-component class="target2"></child-component><br/>
      <child-component class="target3"></child-component><br/>
      <child-component class="target4"></child-component><br/>
      <child-component></child-component><br/>
    </div>
  `,
  styles: [`

  /deep/ child-component.target1 .child-box {
      color: red !important; 
      border: 10px solid red !important;
  }  

  /deep/ child-component.target2 .child-box {
      color: purple !important; 
      border: 10px solid purple !important;
  }  

  /deep/ child-component.target3 .child-box {
      color: orange !important; 
      border: 10px solid orange !important;
  }  

  /* this won't work because the target component is spelled incorrectly */
  /deep/ xxxxchild-component.target4 .child-box {
      color: orange !important; 
      border: 10px solid orange !important;
  }  

  /* this will affect any component that has a class name called .child-box */
  /deep/ .child-box {
      color: blue !important; 
      border: 10px solid blue !important;
  }  


  `]
})
export class App {
}

@Component({
  selector: 'child-component',
  template: `
    <div class="child-box">
      Child: This is some text in a box
    </div>
  `,
  styles: [`
    .child-box {
      color: green;    
      border: 1px solid green;
    }
  `]
})
export class ChildComponent {
}


@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, ChildComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

আশাকরি এটা সাহায্য করবে!

codematrix

Answer 7

আসলে আরও একটি বিকল্প আছে। যা বরং নিরাপদ। আপনি ভিউএনক্যাপসুলেশন ব্যবহার করতে পারেন N তবে কোনও কিছুই আপনার সমস্ত উপাদান শৈলীগুলিকে তার ট্যাগে রাখেনি (ওরফে নির্বাচনকারী)। তবে যাইহোক সর্বদা কিছু গ্লোবাল স্টাইল প্লাস এনক্যাপসুলেটেড স্টাইল পছন্দ করে prefer

এখানে ডেনিস রাইবালকাকে সংশোধন করা হয়েছে:

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

@Component({
  selector: 'parent',
  styles: [`
    parent {
      .first {
        color:blue;
      }
      .second {
        color:red;
      }
    }
 `],
 template: `
    <div>
      <child class="first">First</child>
      <child class="second">Second</child>
    </div>`,
  encapsulation: ViewEncapsulation.None,
})
export class ParentComponent  {
  constructor() { }
}

Answer 8

কৌনিকটিতে এটি অর্জনের জন্য কয়েকটি বিকল্প রয়েছে:

1) আপনি গভীর সিএসএস নির্বাচক ব্যবহার করতে পারেন

:host >>> .childrens {
     color: red;
 }

২) আপনি এটি পূর্বনির্ধারিত হিসাবে এমুলেটেডে সেট করা ভিউ এনক্যাপসুলেশনও পরিবর্তন করতে পারেন তবে সহজেই নেটিভে পরিবর্তন করতে পারেন যা শ্যাডো ডম নেটিভ ব্রাউজার প্রয়োগ ব্যবহার করে, আপনার ক্ষেত্রে এটি কেবল অক্ষম করা দরকার

যেমন: `

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

@Component({
  selector: 'parent',
  styles: [`
    .first {
      color:blue;
    }
    .second {
      color:red;
    }
 `],
 template: `
    <div>
      <child class="first">First</child>
      <child class="second">Second</child>
    </div>`,
  encapsulation: ViewEncapsulation.None,
 })
 export class ParentComponent  {
   constructor() {

   }
 }

Comments

প্রকৃতপক্ষে এর অর্থ হ'ল শৈলীগুলি কেবলমাত্র শিশু উপাদানগুলিকেই নয়, পুরো ডোমকে প্রভাবিত করে।

— ক্যাস্পার জিমিয়ানেক

Answer 9

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

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

প্রযুক্তিগতভাবে, এটি নিম্নলিখিত হিসাবে করা যেতে পারে:

// child.component.html:
<span class="label-1"></span>

// child.component.scss:
:host.child-color-black {
    .label-1 {
        color: black;
    }
}

:host.child-color-blue {
    .label-1 {
        color: blue ;
    }
}

// parent.component.html:
<child class="child-color-black"></child>
<child class="child-color-blue"></child>

অন্য কথায়, আপনি :hostসন্তানের উপাদানগুলিতে নিজেই সম্ভাব্য শিশু শৈলীর সংজ্ঞা দিতে অ্যাঙ্গুলার + সিএসএস ক্লাসগুলির সেট দ্বারা প্রদত্ত সিউডো-সিলেক্টর ব্যবহার করেন । তারপরে আপনি <child>হোস্ট উপাদানটিতে প্রাক-সংজ্ঞায়িত ক্লাস প্রয়োগ করে বাইরে থেকে সেই শৈলীগুলি ট্রিগার করার ক্ষমতা রাখবেন ।

Comments

দেখতে ভাল সমাধানের মতো, প্যারেন্ট ডটকমেন্টাল.এসএসএস ফাইল আছে কি? যদি হ্যাঁ, এটা দিতে যত্ন?

— মনোহর রেড্ডি পোরেডি

@ মোনাহার রেডিপরেডি parent.component.scssবাচ্চাদের উপাদানগুলির স্টাইলিং সম্পর্কিত কোনও স্টাইলিং থাকা উচিত । এটি এই পদ্ধতির একমাত্র উদ্দেশ্য। তোমার দরকার কেন parent.component.scss?

— আলেকজান্ডার আবাকুমভ

নিশ্চিত নয়, কিছুটা সিএসএস জেনে নিন। আপনি কি jsbin বা অন্য কোনও সম্পূর্ণ সমাধান ভাগ করতে পারেন। আপনার সমাধান সবার জন্য ভবিষ্যতের সমাধান হতে পারে।

— মনোহর রেড্ডি পোরেডি

@ মোনাহার রেডিপ্রেডি তারপরে, আপনি যদি কোনও সমস্যা নিয়ে চলে যান তবে আপনার একটি নির্দিষ্ট প্রশ্ন হবে যা আমি উত্তর দিতে পারি বা আপনার সমস্যাটি কীভাবে ঠিক করা যায় সে সম্পর্কে কিছু বোঝার জন্য একটি নির্দিষ্ট বিষয়ে সন্ধান করার পরামর্শ দিতে পারি। আমি ViewEncapsulationকেবল উল্লেখ করেছি কারণ এর ডিফল্ট মানই ওপি প্রশ্নের দিকে নিয়ে যায়। ViewEncapsulationকাজ করার জন্য উপরের কোডটির জন্য আপনাকে আলাদা ধার্য করতে হবে না ।

— আলেকজান্ডার আবাকুমভ

+1 আপনাকে ধন্যবাদ। ভবিষ্যতে এই সমাধানটি নিতে ফিরে আসবে, আজকের জন্য :: এনজি-ডিপ স্ট্যাকওভারফ্লো . com/ a/ 36528769/984471 এর জন্য নিষ্পত্তি হয়েছে।

— মনোহর রেড্ডি পোরেডেডি

Answer 10

আপনার কাছে চাইল্ড উপাদানটির কোড অ্যাক্সেস থাকলে @INPUT ভেরিয়েবলটি পাস করতে আমি অনেক ক্লিনার মনে করি:

ধারণাটি হ'ল পিতামাতারা তার উপস্থিতির অবস্থা কী হওয়া উচিত তা শিশুকে জানান এবং কীভাবে রাষ্ট্রটি প্রদর্শন করবেন তা শিশু সিদ্ধান্ত নেয়। এটি একটি দুর্দান্ত স্থাপত্য

এসসিএসএস উপায়:

.active {
  ::ng-deep md-list-item {
    background-color: #eee;
  }
}

আরও ভাল উপায়: - selectedপরিবর্তনশীল ব্যবহার করুন:

<md-list>
    <a
            *ngFor="let convo of conversations"
            routerLink="/conversations/{{convo.id}}/messages"
            #rla="routerLinkActive"
            routerLinkActive="active">
        <app-conversation
                [selected]="rla.isActive"
                [convo]="convo"></app-conversation>
    </a>
</md-list>

Comments

রক্ষণাবেক্ষণ করাও শক্ত, বিশেষত পুনরাবৃত্ত উপাদানগুলির জন্য।

— এরিক ফিলিপস

Answer 11

আজ (কৌণিক 9) এর হিসাবে, কৌণিক ব্যবহারসমূহ একটি শ্যাডো করে DOM যেমন উপাদান প্রদর্শন করে কাস্টম HTML উপাদানগুলি । এই কাস্টম উপাদানগুলিকে স্টাইল করার একটি দুর্দান্ত উপায় কাস্টম সিএসএস ভেরিয়েবলগুলি ব্যবহার করা হতে পারে । এখানে একটি সাধারণ উদাহরণ:

class ChildElement extends HTMLElement {
  constructor() {
    super();
    
    var shadow = this.attachShadow({mode: 'open'});
    var wrapper = document.createElement('div');
    wrapper.setAttribute('class', 'wrapper');
    
    // Create some CSS to apply to the shadow dom
    var style = document.createElement('style');
    
    style.textContent = `
    
      /* Here we define the default value for the variable --background-clr */
      :host {
        --background-clr: green;
      }
      
      .wrapper {
        width: 100px;
        height: 100px;
        background-color: var(--background-clr);
        border: 1px solid red;
      }
    `;
    
    shadow.appendChild(style);
    shadow.appendChild(wrapper);
  }
}

// Define the new element
customElements.define('child-element', ChildElement);

/* CSS CODE */

/* This element is referred as :host from the point of view of the custom element. Commenting out this CSS will result in the background to be green, as defined in the custom element */

child-element {
  --background-clr: yellow; 
}

<div>
  <child-element></child-element>
</div>

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

একটি কৌণিক অ্যাপে এটি এমন কিছু হতে পারে:

parent.component.scss

child-element {
  --background-clr: yellow;
}

সন্তানের element.component.scss

:host {
  --background-clr: green;
}

.wrapper {
  width: 100px;
  height: 100px;
  background-color: var(--background-clr);
  border: 1px solid red;
}

Answer 12

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

<parent>
  <child [foo]="bar"></child>
</parent>

কৌনিকটি পিতামাতার কাছ থেকে শিশু শৈলীর প্রভাবিত করার সমস্ত উপায়কে হ্রাস করে চলেছে।

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Comments

ওয়েল তারা তাদের ডক্সে স্পষ্টভাবে বলেছে তারা শেষ পর্যন্ত এটি করছে, যার আমি অনুমান করি তারা এটি করবে। যদিও আমি রাজি, খুব শীঘ্রই ঘটছে না।

— জেদ রিচার্ডস

সুতরাং তারা তাদের নিজস্ব সামগ্রীর লাইব্রেরিটিকে অকেজো করে তুলবে। প্রত্যেক গ্রাহকের নিজস্ব ডিজাইনের প্রয়োজন হওয়ায় আমি কোনও গ্রন্থাগারে কোনও ডিফল্ট থিম ব্যবহার করতে সক্ষম হইনি। সাধারণত আপনি কেবল একটি উপাদানটির কার্যকারিতা চান। আমি এই সিদ্ধান্তের পিছনে তাদের সামগ্রিক যুক্তি বুঝতে পারি তা বলতে পারি না।

— ক্রিলিউডজ

Answer 13

আমারও এই সমস্যা ছিল এবং অবহেলিত সমাধানটি ব্যবহার করতে চাইনি তাই আমি শেষ করেছি:

প্যারেন্টে

 <dynamic-table
  ContainerCustomStyle='width: 400px;'
  >
 </dynamic-Table>

শিশু উপাদান

@Input() ContainerCustomStyle: string;

এইচটিএমএল ডিভিতে শিশুতে

 <div class="container mat-elevation-z8"
 [style]='GetStyle(ContainerCustomStyle)' >

এবং কোডে

constructor(private sanitizer: DomSanitizer) {  }

  GetStyle(c) {
    if (isNullOrUndefined(c)) { return null; }
    return  this.sanitizer.bypassSecurityTrustStyle(c);
  }

প্রত্যাশিত মতো কাজ করে এবং হ্রাস করা উচিত নয়;)

Comments

মজাদার! আমি অনুরূপ কিছু সঙ্গে আপ (এখন জন্য)। আপনি কোথা থেকে ডোমসানাইটিজার পাবেন? সম্পাদনা করুন: এটি খুঁজে পেয়েছেন: কৌণিক.ইও

— প্ল্যাটফর্ম-

হ্যাঁ v7 এ এটি দেশীয় আপনি কেবল এটির কনস্ট্রাক্টরের ইনজেকশনটির জন্য অনুরোধ করতে হবে। ;),

— পুরানোতে

Answer 14

ইন্টারনেট আপডেট হিসাবে আমি একটি সমাধান পেয়েছি across

প্রথমে কিছু সাবধান।

1. তবুও করবেন না। স্পষ্ট করার জন্য, আমি বাচ্চাদের উপাদানগুলি তাদের স্টাইল করার অনুমতি দেওয়ার বিষয়ে পরিকল্পনা করব না। SOC। আপনি যদি উপাদান ডিজাইনার হিসাবে এটি অনুমতি দিতে চান তবে আপনাকে আরও বেশি ক্ষমতা দিন।
2. আপনার শিশু যদি ছায়া ডোমে বাস না করে তবে এটি আপনার পক্ষে কাজ করবে না।
3. যদি আপনাকে এমন ব্রাউজার সমর্থন করতে হয় যার ছায়া ডোম না থাকতে পারে তবে এটিও আপনার পক্ষে কাজ করবে না।

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

Answer 15

আমি এটিকে আরও স্পষ্ট করার জন্য একটি উদাহরণ প্রস্তাব করছি, যেহেতু কৌণিক.আইও / গাইড / কম্পোনেন্ট-স্টাইলগুলি বলে:

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

চালু হলে, প্রয়োজনে app.component.scssআপনার আমদানি করুন *.scss। _colors.scssকিছু সাধারণ রঙের মান রয়েছে:

$button_ripple_red: #A41E34;
$button_ripple_white_text: #FFF;

সমস্ত উপাদান একটি নিয়ম প্রয়োগ করুন

btn-redক্লাস থাকা সমস্ত বোতাম স্টাইলযুক্ত হবে।

@import `./theme/sass/_colors`;

// red background and white text
:host /deep/ button.red-btn {
    color: $button_ripple_white_text;
    background: $button_ripple_red;
}

একটি উপাদান একটি নিয়ম প্রয়োগ করুন

উপাদানগুলিতে btn-redক্লাস থাকা সমস্ত বোতাম app-loginস্টাইলযুক্ত হবে।

@import `./theme/sass/_colors`;

/deep/ app-login button.red-btn {
    color: $button_ripple_white_text;
    background: $button_ripple_red;
}

Answer 16

আমি এটি কৌণিকের বাইরে সমাধান করেছি। আমি একটি শেয়ার্ড স্কেস সংজ্ঞায়িত করেছি যা আমি আমার বাচ্চাদের আমদানি করছি।

shared.scss

%cell {
  color: #333333;
  background: #eee;
  font-size: 13px;
  font-weight: 600;
}

child.scss

@import 'styles.scss';
.cell {
  @extend %cell;
}

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