:: एनजी-डीप के स्थान पर क्या उपयोग करना है

Question

मैं राउटर आउटलेट द्वारा कोणीय में रखे गए तत्व को स्टाइल करने की कोशिश कर रहा हूं और यह सुनिश्चित करना चाहता हूं कि उत्पन्न तत्व को 100% की चौड़ाई मिले

अधिकांश उत्तरों से, मैं देख रहा हूं कि मुझे ::ng-deepचयनकर्ता का उपयोग करना चाहिए , लेकिन कोणीय के डॉक्स से इसे हटा दिया जा रहा है। क्या कोई विकल्प है ::ng-deep?

Comments

::ng-deepकहीं नहीं जा रहा है यह हमेशा एक सेटिंग होगी जिसे आप सक्षम कर सकते हैं। वहाँ बिल्कुल कोई रास्ता नहीं है वे इसे अब बड़े पैमाने पर सामुदायिक प्रतिक्रिया के बिना निकाल सकते हैं। कितने परिणाम इस खोज के लिए वापस आने पर देखो github.com/search?q=%3A%3Ang-deep&type=Code - यह सीएसएस कह की तरह है !importantसंपत्ति गायब करने जा रहा है

— Simon_Weaver

मुझे नहीं पता - मैंने अपने मोनो-रेपो (कई काफी बड़े उद्यम ऐप) में जिज्ञासा से बाहर एक परियोजना-व्यापी खोज की और केवल 69 संदर्भों के साथ बाहर आया। मुझे ऐसा लगता है कि निश्चित रूप से एक स्वीकार्य परावर्तनकर्ता है जो पदावनति से बाहर निकल सकता है और जब भी वे विकल्प निकालेंगे तो खुशी-खुशी करेंगे। इसके अलावा, !importantसीएसएस कल्पना में एक महत्वपूर्ण स्थान है, जबकि ::deepहमेशा केवल एक प्रस्ताव था।

— दुबेवाद

Answer 1

एफडब्ल्यूआईडब्ल्यू अपने शोध में मुझे एनजी-डीप या अन्य लागू विकल्पों के लिए कोई प्रतिस्थापन नहीं मिला है। ऐसा इसलिए है, क्योंकि मेरा मानना ​​है कि, कोणीय टीम शैडो डोम पर W3C की कल्पना को दर्शा रही है, जिसमें शुरुआत में चयनकर्ता थे deep। हालांकि, W3c ने सिफारिश को हटा दिया है, लेकिन इसे एक नए के साथ प्रतिस्थापित नहीं किया है। जब तक ऐसा नहीं होता, मैं कल्पना करता हूं कि कोणीय टीम रखेंगे ::ng-deepऔर यह विकल्प उपलब्ध है, लेकिन W3C के ड्राफ्ट के लंबित होने के कारण पदावनत अवस्था में। मैं इस समय इसे वापस लेने के लिए दस्तावेज़ खोजने में सक्षम नहीं हूं, लेकिन मैंने हाल ही में इसे देखा।

लंबी कहानी छोटी: ::ng-deepजब तक कोई प्रतिस्थापन नहीं किया जाता है तब तक इसका उपयोग और इसके विकल्प का उपयोग करते रहें - पदावनति केवल एक प्रारंभिक सूचना है ताकि जब भी वास्तविक परिवर्तन हो तो लोग अंधा न हों।

- अद्यतन -

https://drafts.csswg.org/css-scoping-1/ यहाँ मसौदा प्रस्ताव है यदि आप रुचि रखते हैं। ऐसा प्रतीत होता है कि वे छाया डोम के पेड़ के भीतर तत्वों के लिए चयनकर्ताओं के एक मजबूत सेट पर काम कर रहे हैं; यह इस कल्पना है, एक बार मंजूरी दे दी, कि मुझे लगता है कि कोणीय क्लोन को सूचित करेगा, अगर एक भी है (यानी कोणीय को ब्राउज़रों में रहते हुए अपने चयनकर्ताओं को लागू करने की आवश्यकता नहीं हो सकती है)।

Comments

मैं इससे सहमत हूं, लेकिन मैं पदावनत ढांचे (और ब्राउज़र) की कार्यक्षमता का उपयोग करके नए कोड को उद्देश्यपूर्ण ढंग से लिखने की सिफारिश नहीं करूंगा।

— MT_

या तो मैं। लेकिन कोई विकल्प नहीं है, जो मुझे लगता है कि यहां स्पष्ट रूप से स्पष्ट रूप से उल्लिखित है। क्या आपके पास इसमें मदद करने के लिए कोई सुझाव है?

— द्विवेद

एकमात्र विकल्प जो मैं जल्दी से सोच सकता हूं कि घटकों के घोंसले को फिर से

— भरना होगा

एक तीसरे पक्ष के पुस्तकालय के साथ यह ::ng-deepएक समय में एक बार उपयोग करने से बचने के लिए लगभग असंभव है (यदि आप इस बात की परवाह करते हैं कि आपकी साइट कैसी दिखती है) - यहां तक ​​कि कोणीय सामग्री जैसी चीज के साथ भी। उनके पास कीड़े हैं जो महीनों तक तय नहीं होते हैं, और वर्कअराउंड में अक्सर एनजी-डीप शामिल होते हैं। और अलग किए गए 'गहरे' चयनकर्ताओं को भ्रमित न करें - ::ng-deepनिश्चित रूप से कम से कम एक को हटा दिया गया है।

— साइमन_वेर

हाँ यह पूरे सिस्टम के सबसे बदसूरत हिस्सों में से एक है। लेकिन इनकैप्सुलेशन वह है जो एनकैप्सुलेशन है। आपको सीएसएस में स्पष्ट रूप से :: एनजी-डीप का उपयोग करके सीमा को तोड़ना होगा, या आपको इसे प्रोग्रामेटिक रूप से करने की आवश्यकता है। हम कभी-कभी घटक टैग पर एक विशेषता का उपयोग करते हैं ताकि यह इंगित किया जा सके कि एक घटक (अर्थात संदर्भ) में क्या "मोड" है, और फिर शैलियाँ बाल घटक w / o में रह सकती हैं :: एक गुण चयनकर्ता के माध्यम से एनजी-डीप जैसे: :host[some-context] {}- यह इस पर निर्भर करता है कि आप किस तरह का लचीलापन / पोर्टेबिलिटी चाहते हैं। मैं किसी भी तरह से सुपर की तरह नहीं हूं लेकिन यह इनकैप्सुलेशन की दुनिया है।

— दुवेवाद

Answer 2

हटाए गए को बायपास करने के लिए ::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 {

}

यह इस घटक को .scss शैलियों को संपूर्ण अनुप्रयोग के लिए वैश्विक बना देगा। शैलियों को माता-पिता और सहोदर घटकों के लिए श्रृंखला में जाने की अनुमति नहीं देने के लिए, पूरे स्कैस को चयनकर्ता के साथ लपेटें:

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

अब, यहां निर्दिष्ट शैलियाँ बच्चों के घटकों के लिए नीचे जाएंगी ताकि आपको अपने सीएसएस चयनकर्ताओं के साथ अतिरिक्त विशिष्ट होना पड़े और सीएसएस जोड़ते समय अपने पी और क्यू का ध्यान रखें (हो सकता है कि अपने एंगुलर ऐप में निर्दिष्ट बच्चे चयनकर्ता को जोड़ें और फिर इसकी शैलियों को)।

मैं कहता हूं कि ऊपर दिए गए पैराग्राफ की वजह से यह सबसे अच्छा तरीका नहीं है, लेकिन इसने मुझे अच्छी सेवा दी है।

Comments

यह केवल वर्कअराउंड है और यदि आपके पास बहुत बड़ी परियोजना है, तो स्विचिंग से ViewEncapsulationउन सभी घटकों में रिसाव करने की उन शैलियों को बहुत नुकसान होगा। इस सुविधा का बुद्धिमानी से और पूरी समझ के साथ इस्तेमाल किया जाना चाहिए

— mpro

@mpro मैं समझता हूं, इसीलिए मैंने कैविएट दिया और कहा कि यह सबसे अच्छा तरीका नहीं है और आपको अपने पी और क्यू को ध्यान में रखना होगा और अतिरिक्त विशिष्ट होना होगा। मेरे लिए, इस दृष्टिकोण ने अब तक अच्छा काम किया है। :: एनजी-डीप को डेप्रिसिएशन के लिए चिह्नित किया जाता है और यह एक वर्कअराउंड है।

— अलीफ ५०

ईमानदारी से, मुझे लगता है कि अगर आप ऐसा करते हैं तो यह एक भयानक निष्कर्ष है कि अगर आपने ऐसा किया तो यह खतरे में है। हाँ, मुझे पता है कि आप बहुत मानते हैं, लेकिन मुझे लगता है कि आप ऐसा करके अपने आप को पैर में गोली मार रहे हैं। देखें इनकैप्सुलेशन कई कारणों से बहुत उपयोगी है। हालाँकि यह लगभग उतना बुरा नहीं है जितना किसी भी कोणीय टीम ने इसे बिना किसी तार्किक हल के निकाला और कई को बहुत भ्रम में डाल दिया। दिन के अंत में आप अभी भी एक वेब ब्राउज़र के लिए कोड लिख रहे हैं - किसी तरह का मालिकाना कोणीय इंजन नहीं।

— साइमन_वेवर

@Simon_Weaver मैं साझा करने के लिए आपकी राय और धन्यवाद का सम्मान करता हूं। मैं इसे सिर्फ इसलिए सामने रख रहा हूं क्योंकि यह वही है जो मैंने पदावनति को दरकिनार करने के लिए इस्तेमाल किया था। मैं कैवियेट भी प्रकट करता हूं।

— अलीएफ 50

@ AliF50 "सर्कुलेशन डिप्रेशन" वास्तव में एक चीज नहीं है। यहाँ वास्तविक समस्या यह है, और मैंने अपने जीवन में इससे पहले कभी नहीं देखा है, उन्होंने इसका नाम एक विकल्प के नाम के बिना पदावनत कर दिया । मेरा जवाब (ऊपर स्वीकार किया गया) मेरी परिकल्पना को बताता है कि उन्होंने कल्पना के साथ संरेखित करने के लिए ऐसा क्यों किया (W3C ने इसे हटा दिया)। हालाँकि, यदि आप प्रस्तावों को पढ़ते हैं, तो ऐसा लगता है कि :: एनजी-डीप को एक उपयुक्त विकल्प से बदल दिया जाएगा, जिसका अर्थ है कि जब यह उपलब्ध हो जाता है, तो आप अपने दृष्टिकोण के बजाय अपने :: एनजी-डीप रेफरेंस को अपडेट करते हैं, जो शाब्दिक रूप से कॉल करता है। पूरे आवेदन को फिर से आर्किटेक्चर करना।

— dudewad

Answer 3

गहरी शैली का सरल और आसान विकल्प मूल घटक के तत्व चयनकर्ता का उपयोग करके एक सामान्य शैली है। तो अगर आप नायक में था-details.component.css:

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

यह style.css में यह बन जाएगा:

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

मूल रूप से एक गहरी शैली एक अन-इनकैप्सुलेटेड शैली है, इसलिए यह वैचारिक रूप से एक घटक शैली की तुलना में मेरे लिए एक सामान्य शैली की तरह लगता है। व्यक्तिगत रूप से मैं अब गहरी शैलियों का उपयोग नहीं करता। प्रमुख संस्करण अपडेट्स में ब्रेकिंग परिवर्तन सामान्य हैं और हटाए गए फ़ीचर को हटाना निष्पक्ष खेल है।

Comments

वाह, अब मैं गूंगा महसूस करता हूं। धन्यवाद! अन्य सामने के चौखटे से आकर मुझे लगा कि यह असंभव है

— राफेल विदुर्रे

यह वास्तव में उपयोगी है। यह एक ख़ुशख़बरी है कि :: एनजी-डीप को बिना प्रतिस्थापन के इतने लंबे समय के लिए पदावनत कर दिया गया: (होस्ट :: एनजी-डीप गहरे काम करता है जैसा कि अपेक्षित है, लेकिन मैं पदावनत सामान का उपयोग नहीं करना चाहता)।

— अलेक्सई

Answer 4

जैसा कि किसी ने पहले कहा था, यदि आप किसी तीसरे पक्ष के पुस्तकालय का उपयोग कर रहे हैं तो एक ::ng-deepबार में एक बार उपयोग करने से बचना लगभग असंभव है । लेकिन जब आप ::ng-deepब्राउज़र द्वारा समर्थित नहीं हो जाते हैं तो आप अपनी पिछली परियोजनाओं के बारे में क्या करने जा रहे हैं ?

उस क्षण के लिए तैयार होने के लिए मैं निम्नलिखित सुझाव दूंगा:

1. ViewEncapsulation.N बुद्धिमानी से उपयोग करें । जो केवल उन घटकों के लिए अनुवाद करता है जिन्हें गहरे घटकों तक पहुंचने की आवश्यकता होती है।

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

2. अब, टकराव और सीएसएस अजीबता से बचने के लिए आपको (एक नियम के रूप में) हमेशा अपने घटक के टेम्पलेट को एक वर्ग के साथ लपेटना चाहिए । तो, example.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>

3. फिर से, नियम से, हर एक SCSS फ़ाइल की पहली पंक्ति घटक कंटेनर को लक्षित करेगी। चूंकि कोई एनकैप्सुलेशन नहीं है, आप उनकी कक्षाओं को लक्षित करके तीसरे पक्ष के घटक को संशोधित कर सकते हैं। उस ने कहा, example.component.scss जैसा होना चाहिए:

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

भविष्य के लिए एक स्व नोट: https://angular.io/guide/component-styles
जो आधिकारिक विकल्पों / तरीकों से देखने के लिए पहली जगह होनी चाहिए

Comments

But what are you going to do about your previous projects when the ::ng-deep became no longer supported by browsers?क्या कोणीय cli द्वारा संकलित / पॉलीफ़िल्ड नहीं किया गया है ताकि कोई ब्राउज़र भागीदारी न हो? महान जवाब btw।

— beppe9000

यह वास्तव में सीएसएस फ़ाइल को प्रदान किया गया है, और फिर ब्राउज़र तदनुसार शैलियों को लागू करता है। एलियासिंग संभव है (मुझे लगता है) इसका उपयोग करके :host /deep/ .mat-tab-labelइसे रूपांतरित किया जाना चाहिए ::ng-deep। ईमानदार होने के लिए, ऐसा लगता है कि उपनाम का उपयोग करना अधिक सुविधाजनक है क्योंकि सीएलआई इसे संकलन-समय के दौरान बदल सकता है, लेकिन फिर भी, आपको ng buildफिर से काम करने और तैनात करने की आवश्यकता होगी । मेरा संकल्प ::ng-deepमेरी सभी परियोजनाओं पर सभी से बचने के लिए था :)

— guzmanoj

हाँ फिर से तैनाती से बचने के लिए समझ में आता है

— beppe9000

Answer 5

यह :: एनजी-डीप के लिए एक सामान्य प्रतिस्थापन नहीं है, लेकिन प्रश्न लेखक द्वारा वर्णित उपयोग के मामले के लिए:

विशेष मामले में जहां आप राउटर-आउटलेट द्वारा डाले गए तत्व को स्टाइल करना चाहते हैं, वहां सीएसएस में आसन्न पड़ोसी चयनकर्ता का उपयोग करके एक सुरुचिपूर्ण समाधान है:

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

यह उन सभी तत्वों पर लागू होगा जो राउटर-आउटलेट के प्रत्यक्ष पड़ोसी हैं।

आगे पढ़े:
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
https://angular.io/guide/router#router-outlet

Comments

मैं इस चयनकर्ता का उपयोग करने की अनुशंसा नहीं करूंगा। ऐसा लगता है जैसे आप टकरावों का शाब्दिक दुःस्वप्न खोल रहे हैं, खासकर जब आपका आवेदन बढ़ता है। उसके शीर्ष पर, * चयनकर्ता वस्तुतः CSS अस्तित्व में सबसे धीमा चयनकर्ता है।

— dudewad

@dudewad जबकि * चयनकर्ता सबसे धीमा चयनकर्ता है, इसे केवल अगली सिबलिंग (+) पर लागू किया जा रहा है, न कि पूरी श्रृंखला / ट्री पर, इसलिए इसे केवल नाममात्र का अंतर बनाना चाहिए।

— एरिक फिलिप्स

@ErikPhilips सीएसएस चयनकर्ताओं को दाएं-बाएं छोड़ दिया गया है, इसलिए यह वास्तव में सबसे खराब स्थिति है।

— 21

@dudewad मुझे लगता है कि हम कुछ याद कर रहे हैं। *इसके बाद सबसे खराब स्थिति है, element *लेकिन element + *पहले दो के निकट नहीं है।

— एरिक फिलिप्स

मुझे नहीं पता ... मैंने इसका परीक्षण नहीं किया है, यह सिर्फ वही है जो मैं जानता हूं कि सीएसएस पार्सर अपनी बात कैसे करते हैं।

— 23

Answer 6

आप "/ डीप /" का उपयोग कर सकते हैं। यह :: एनजी-डीप वैकल्पिक है।

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

Comments

/ गहरा / वाक्यविन्यास अप्रचलित है, आखिरी बार 2014 में सीएसएस-

— स्कूपिंग

यह एक aliasनहीं है alternative।

— बाल कृष्ण झा