Angular: प्रस्ताव: घटक घोषणा में मेजबान तत्वों को निर्देश जोड़ने की क्षमता की आवश्यकता है।

मैं वर्तमान में एक बड़ा ग्राहक विकसित कर रहा हूं और इसलिए सभी जीयूआई संबंधित समस्याओं को पुन: प्रयोज्य कोणीय 2 निर्देशों में तोड़ने की कोशिश कर रहा हूं। यह मुझे हमेशा उसी समस्या की ओर ले जाता है, जैसा कि जेम्स ने पूरी तरह से बताया।
यह वास्तव में अच्छे मॉड्यूलर और गतिशील वास्तुकला के लिए किसी तरह काम करना है। स्पर्श उदाहरण कई परिदृश्यों में से केवल एक है जहां इसकी आवश्यकता होती है। जैसे ड्रैग एंड ड्रॉप, रिसाइज ऑब्जर्विंग आदि आदि।
प्लंकर के रूप में एक और उदाहरण बनाया:
https://plnkr.co/edit/J65THEMic0yhObt1LkCu?p=info

क्या कोई संभावना है कि इस कार्यक्षमता को जल्द ही किसी भी समय जोड़ा जाएगा?

इससे संबंधित एक स्टैक ओवरफ्लो प्रश्न है: http://stackoverflow.com/questions/37148080/use-angular2-directive-in-host-of-another-directive

@ Andy1605 क्या आपने कभी इसके आसपास कोई रास्ता खोजा? मैंने RCs के दौरान इस वजह से NG2 के साथ काम करने की बात कही। इसे वापस लेना अच्छा लगेगा, लेकिन यह विशेष समस्या मुझे एक्स्टेंसिबल यूआई पैटर्न बनाने से रोकती है।

मुझे यह भी लगता है कि एंगुलर यहां एक आवश्यक विशेषता को याद कर रहा है। एक घटक के लिए अपने मेजबान के लिए (एकाधिक) विशेषता-निर्देश घोषित करना संभव होना चाहिए। ऐसा न कर पाना भी मेरे प्रोजेक्ट के लिए एक बड़ी बाधा है।
क्या किसी को पता है कि क्या इसे भविष्य में लागू किया जाएगा या अगर ऐसा कोई कारण है कि ऐसा क्यों नहीं किया जा सकता है?

मैंने इस मुद्दे का समाधान प्रस्तावित किया है (यद्यपि कोणीय संस्करण 1 के लिए): https://github.com/angular/angular.js/issues/15270।

मेरा विचार है, केवल निर्देशों को जोड़ने की क्षमता होने के बजाय, संकलन ढांचे में "होस्टट्रांसफॉर्म्स" नामक एक नया एक्स्टेंसिबिलिटी पॉइंट होगा (कोणीय 1 के मामले में, "नोडट्रांसफॉर्म्स") जिसकी पहुंच अनमॉडिफाइड, अनफ़िल्टर्ड घटक घोषणा तक होगी और मूल, असम्पीडित घटक होस्ट नोड जब भी किसी घटक का पहली बार संकलक द्वारा सामना किया जाता है और DOM में सम्मिलन के लिए तैयार किया जाता है। इस तरह एक डेवलपर कस्टम गुणों के साथ घटक सज्जाकारों का विस्तार कर सकता है, और फिर उन कस्टम गुणों को परिवर्तित करने के लिए नोडट्रांसफॉर्म का उपयोग कर सकता है, जो संकलन से ठीक पहले कोणीय ढांचे से परिचित है। उदाहरण के लिए फ़ीचर अनुरोध थ्रेड की जाँच करें।

मैं कोणीय 2 स्रोत कोड की तुलना में कोणीय स्रोत कोड से अधिक परिचित हूं, इसलिए मुझे यकीन नहीं है कि कार्यान्वयन प्रक्रिया यहां समान होगी या नहीं। लेकिन चूंकि यह एक बहुत लोकप्रिय अनुरोध प्रतीत होता है, इसलिए मुझे यह देखना अच्छा लगेगा कि इसे या तो कोणीय 2 में लागू किया गया है और बैकपोर्ट किया गया है, या कोणीयज में लागू किया गया है और अग्रेषित किया गया है (क्या यह एक बात है?)

+1

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

<ng-container> समान एक नया टैग बनाने के बारे में क्या है जो आपको host मेटाडेटा प्रॉपर्टी के बजाय घटक के टेम्प्लेट में लागू करने देता है? निर्देशों को होस्ट घटक में जोड़े जाने का संकेत देने के लिए <ng-host [attributeDirective]> जैसा कुछ।

@jjstreet आपका प्रस्ताव replace: true समान लगता है (जाहिर है समान नहीं, लेकिन समान), जिसे कुछ समय पहले बहिष्कृत किया गया था। लेकिन शायद replace: true को किसी ऐसे कारण से बहिष्कृत कर दिया गया था जो यहां लागू नहीं होगा।

@ pkozlowski-opensource क्या हमें इस पर ng2 टीम से किसी प्रकार की प्रतिक्रिया मिल सकती है?

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

+1 इस सुविधा के लिए UI घटकों में स्वच्छ और पुन: प्रयोज्य कोड होना आवश्यक है

+1

क्या हमें इस पर ng2 टीम से किसी प्रकार की प्रतिक्रिया मिल सकती है? यहां तक ​​​​कि अगर यह कहना है कि आप इसे नहीं करने जा रहे हैं, या यह कहना कि यह एक अच्छा विचार है, लेकिन वर्तमान प्राथमिकता नहीं है, तो मैं कुछ प्रकार के इनपुट सुनना चाहता हूं।

मैं इसके लिए एक और उपयोग केस जोड़ना चाहता हूं। यह ng2-mobx (https://github.com/500tech/ng2-mobx) को रैपिंग घटक से छुटकारा पाने और अधिक साफ दिखने की अनुमति देगा।

मुझे यह भी लेना अच्छा लगेगा। वर्तमान में मुझे कस्टम routerLink निर्देश बनाने के लिए इसकी आवश्यकता है। मैं कोणीय एक का पुन: उपयोग करना पसंद करूंगा और इसे केवल mi निर्देश द्वारा तैयार किए गए मापदंडों के साथ प्रदान करूंगा।

तो <a [routerLink]="repeatedCodeToGetLink()"> बजाय मेरे पास <a [myRouterLink]> होगा और यह गतिशील रूप से [routerLink] को हल किए गए पैरामीटर के साथ लागू करेगा।

इसकी संभावनाओं को लेकर वास्तव में उत्साहित हैं!

हमें कुछ समय के लिए इसकी आवश्यकता थी। वास्तव में, कुछ समय पहले मुझे पता था कि इसके लिए एक खुला मुद्दा था, मैंने स्टैक ओवरफ्लो पर अनिवार्य रूप से इस सुविधा के बारे में

मैंने एक विस्तृत उदाहरण प्रदान किया है कि हम इस सुविधा का उपयोग https://github.com/angular/flex-layout/issues/162 को हल करने के लिए कैसे कर पाएंगे, जिसे हमने कुछ समय के लिए खोला है। ( उदाहरण और स्पष्टीकरण यहां देखें )

हम वास्तव में किसी भी प्रतिक्रिया की प्रतीक्षा कर रहे हैं, मैं देख रहा हूं कि यह मुद्दा इस रेपो में सभी खुले मुद्दों में तीसरा सबसे अधिक अंगूठा है । उम्मीद है कि हम इसे अगली रिलीज़ में या इससे पहले (उंगलियों को पार करते हुए) देख सकते हैं!

/सीसी @tbosch @IgorMinar @mhevery @jelbourn @hansl @ThomasBurleson

@jjstreet मुझे लगता है कि आपका सुझाव

<ng-host myDirective="foo"></ng-host> 

... एक और अलग प्रस्ताव के साथ अच्छा होगा जो कुछ समय पहले अलग कारणों से बनाया गया था, हम यहां चर्चा कर रहे हैं।

देखें https://github.com/angular/angular/issues/7297

वर्तमान में मैं मूल घटक में निर्देश जोड़कर इसके आसपास काम करता हूं और फिर मेजबान में श्रोता को @HostListener के साथ जोड़ता हूं।

जनक.html
<my-component myDirective>

घटक.ts
@HostListener('myEvent') handler() { // do stuff }

लेकिन अगर हम सीधे होस्ट में विशेषताएँ जोड़ सकते हैं तो यह क्लीनर होगा ...

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

• मेरे स्टैक ओवरफ़्लो उत्तर पर पूर्ण स्पष्टीकरण: http://stackoverflow.com/a/41650302/2959469
• टीएल; डीआर प्लंकर देखें: https://plnkr.co/edit/TCagW8vOPrqSiOT9Oztf

बस एक मासिक अनुस्मारक कि हम इस पर एंगुलर टीम से सकारात्मक या नकारात्मक टिप्पणी की प्रतीक्षा कर रहे हैं।

@tbosch - इस मुद्दे की प्राथमिकता पर कोई सार्वजनिक विचार। यह @angular/flex-layout भी प्रभावित करता है।

@fadzic क्या आप ऐसा करके केवल होस्ट तत्व को निर्देश नहीं जोड़ सकते ...

घटक.ts
@HostBinding('attr.myHilite') myHilite = new myHiliteDirective()

या इस तरह अगर आपको ElementRef या Renderer2 जैसे पैरामीटर चाहिए
@HostBinding('attr.myHilite') myHilite = new myHiliteDirective(this.elementRef, this.renderer)

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

@btinoco जो काम नहीं करता है क्योंकि कोई जीवनचक्र विधियों को नहीं कहा जाता है। आपको प्रत्येक घटक में मैन्युअल रूप से सब कुछ तार करना होगा जो निर्देश का उपयोग करता है न कि केवल आपके लिए कोणीय तार रखने के बजाय।

@hcampos सिर ऊपर करने के लिए धन्यवाद। मैंने अभी इसे आजमाया है और मेरे निर्देश का ngOnInit निष्पादित नहीं हुआ (जब तक कि मैं अपने घटक में मैन्युअल रूप से निर्देश का उपयोग नहीं करता) या मैं अपने घटक के ngOnInit() पर निर्देश के ngOnInit() को कॉल करता हूं . मुझे यह बताने के लिए फिर से धन्यवाद।

@btinoco - हाँ। यह एक सूक्ष्म लेकिन घिनौना मुद्दा है। एक कि @ कोणीय/फ्लेक्स-लेआउट उम्मीदें जल्द ही ठीक हो जाएंगी। ;-)

इस बारे में एंगुलर टीम की ओर से कोई खबर? इस इश्यू को खोले हुए 1 साल हो गया है...

इस मुद्दे पर यह विस्तृत विवरण ढूँढना बहुत अच्छा था,
तब कोणीय टीम से कोई प्रतिक्रिया नहीं मिलना सुपर अनकूल था :(

पहले से काम कर रहे समाधानों के बारे में:

यह सुविधा अनुरोध बहुत कुछ मिक्सिन जैसा लगता है। दरअसल, डिस्क्रिप्शन में बुलेट नंबर 2
इस सुविधा का वास्तव में अधिकारी से मेल खाता है
टाइपस्क्रिप्ट के दस्तावेज़ीकरण, यहाँ देखें।
कोणीय में, यह थोड़ा खराब हो जाता है, हालांकि @Input() s के साथ एक वर्ग को मिलाने के लिए, आप
उन्हें बेस क्लास पर फिर से घोषित करना होगा।

एक अन्य समाधान जो पहले से ही आज काम करता है, वह यह होगा कि घटक में एक आवरण तत्व हो और वहां निर्देशों को लागू किया जाए।
उदाहरण के लिए यदि घटक में <wrapper g-touch>... जैसा टेम्पलेट है

"एक सहायक फ़ंक्शन बनाएं जो इसे सीधे elementRef.nativeElement पर सेवा के माध्यम से करता है" के संबंध में:
हाँ, यह भी एक अच्छा विचार लगता है। मैं अभी के लिए WebWorkers की परवाह नहीं करूंगा,
चूंकि वे अभी भी प्रयोगात्मक हैं और उत्पादन के लिए कुछ बड़ी सुविधाओं को याद कर रहे हैं,
और लगभग कोई पुस्तकालय वेबवर्कर्स पर काम नहीं करेगा।
उदाहरण के लिए हमारी सामग्री पुस्तकालय भी देखें जो सीधे डीओएम तक पहुंचता है।

प्रस्ताव के विकल्प 1 के संबंध में:

मेजबान संपत्ति बाइंडिंग के लिए वर्तमान शब्दार्थ हैं,
कि वे अंतर्निहित HTML तत्व पर एक संपत्ति myDir सेट करते हैं,
लेकिन कोई निर्देश नहीं। हालाँकि, यदि host भी निर्देश प्रस्तुत कर सकता है, तो उपयोगकर्ता निम्नलिखित लिख सकते हैं
और भ्रमित होगा कि यह myDir निर्देश में संपत्ति को अपडेट क्यों नहीं करता है:

@Component({
  host: {
    '[myDir]': true
  },
  template: '...'
})
class MyComp {}

विकल्प १) और विकल्प ३ के संबंध में:
एक ही तत्व पर निर्देशों के बीच किसी प्रकार की host बाइंडिंग का परिचय यह कर सकता है:

• डेटा बाइंडिंग ग्राफ़ में एक चक्र की ओर ले जाता है, जिसका कोणीय समर्थन नहीं करता है, और इसलिए
  पुराने मानों के कारण डीबग त्रुटियों के लिए कठिन हो जाता है/"जांच के बाद अभिव्यक्ति बदल गई है" त्रुटियां।
• एक दूसरे को इंजेक्शन लगाने वाले निर्देशों की तुलना में अतिरिक्त perf ओवरहेड की ओर ले जाता है
  और सीधे संवाद कर रहे हैं।

प्रस्ताव के विकल्प 2 के संबंध में:

• हां, gTouch वर्ग को संदर्भित करना अजीब लगता है, जैसा कि अन्य सभी निर्देश
  NgModule s के माध्यम से ट्रिगर होते हैं।

@ThomasBurleson अधिक विवरण में आपके उपयोग के मामले के बारे में ऑफ़लाइन बात करते हैं ...

@tbosch मैं एक और विकल्प प्रस्तावित करना चाहता हूं: एक देशी कोणीय टैग पेश करें, चलिए इसे <ng-host> ।

नोट: @mhevery ने https://github.com/angular/angular/issues/7546 में एक <ng-host> टैग की शुरुआत का प्रस्ताव दिया, हालांकि, भले ही मैं यहां एक ही टैग नाम का उपयोग कर रहा हूं, मैं क्या हूं प्रस्ताव अलग है और विशेष रूप से यहां उठाए गए मुद्दे को संबोधित करने के लिए है।

ng-host टैग को नियमित निर्देश/घटक वर्ग के रूप में लागू नहीं किया जाएगा, बल्कि इसके बजाय "मैजिक" फ्रेमवर्क कोड होगा... ng-content , ng-container , आदि के समान। ।,
टैग केवल घटक होस्ट के लिए "सूचक" के रूप में काम करेगा जो कि सीएसएस :host चयनकर्ता के समान है ।

यह अस्पष्ट परिदृश्यों से बचता है, प्रत्येक घटक को केवल एक <ng-host> ब्लॉक रखने की अनुमति होगी और इसे उस घटक के टेम्पलेट का रूट टैग/नोड होना होगा।

यहां बताया गया है कि कोई इसका उपयोग कैसे करेगा:

// Option 5: Use `<ng-host>`.. Very declarative and intuitive
@Component({
  selector: 'g-btn',
  template: `
    <!-- 
      Besides comments, having dom code inside the template but outside of a declared 
      ng-host code block would raise an error (hopefully at compile-time) .
    -->

    <ng-host role="button" g-touch> 
      <ng-content></ng-content>
    </ng-host>
  `
})

वैसे @tbosch , प्रतिक्रिया देने के लिए धन्यवाद। हम वास्तव में इस मुद्दे पर आपके जुड़ाव और प्रतिक्रिया की सराहना करते हैं।

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

उदाहरण के लिए, एक टूलटिप निर्देश, जो हमारे पूरे एप्लिकेशन में बड़ी संख्या में तत्वों पर लागू होने वाला है, और हम डिले को डिफॉल्ट करना चाहते हैं और एपेंड टूबॉडी (यह एक केंद्रीकृत कॉन्फिग ऑब्जेक्ट का समर्थन नहीं करता है)। चूंकि यह केंद्रीय कॉन्फ़िगरेशन ऑब्जेक्ट का समर्थन नहीं करता था, इसलिए हमें हर जगह तीन या चार विशेषताओं को रखना था, जिसका हम उपयोग करना चाहते थे। और फिर बाद में, हम उस पुस्तकालय से दूर चले गए (सामग्री टूलटिप्स का उपयोग करना शुरू कर दिया) और हमें प्रत्येक टूलटिप को मैन्युअल रूप से बदलना पड़ा। यदि हम अपना स्वयं का निर्देश बनाने में सक्षम होते हैं जो इसे "लिपटे" करता है, तो उस निर्देश को बदलने के लिए [mdTooltip] को अन्य पुस्तकालय के बजाय इसके होस्ट पर लागू करना उतना ही सरल होता।

@MikeMatusz ऐसा लगता है कि मेरे मन में भी यही था, यहाँ https://github.com/angular/flex-layout/issues/162#issuecomment -290350270 से मेरा स्निपेट है।

@Directive({
  selector: 'fxLayoutFullPage',
  hostDirectives: [LayoutDirective],
  host: { 
    'fxLayout': 'column', 
    'style': 'min-height:100vh; background-color:yellow'
  }, 
}) class LayoutFullPageDirective {}

क्या एक संपत्ति डेकोरेटर बनाना संभव होगा जो एक निर्देश को तत्काल करता है?
उदाहरण के लिए:
@HostDirective(LayoutDirective) myLayoutDirective: LayoutDirective;

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

यह कहाँ खड़ा है? मैं Angular2/4 के लिए बिल्कुल नया हूं, और मैं जो करना चाहता हूं वह एक निर्देश बनाना है जो एक ही बार में कई अन्य निर्देशों को लागू करता है। ताकि इसके बजाय:

<button directiveA directiveB directiveC>BUTTON TEXT</button>

मैं बस लिख सकता हूँ:

<button customDirectiveABC>BUTTON TEXT</button>

ऐसा लगता है कि यह आसान होना चाहिए - मूल रचना/सूखापन। लेकिन जहाँ तक मैं बता सकता हूँ यह संभव नहीं है?

यह भी देखें https://github.com/angular/flex-layout/issues/76#issuecomment -310509013

@ सोयनॉग , मैं बिल्कुल वैसा ही महसूस करता हूं। मैं यह भी जानना चाहता हूं कि यह कहां खड़ा है।

मैं कोणीय सामग्री और कोणीय 2-ड्रैगेबल (क्योंकि कोणीय/सामग्री # 1206 अभी तक समर्थित नहीं है) का उपयोग करके ड्रैग करने योग्य संवाद बनाने में सक्षम होने की उम्मीद कर रहा था, जहां मैं गतिशील रूप से md-dialog-container एक निर्देश जोड़ना चाहता हूं कि MdDialog सेवा बनाता है, लेकिन गतिशील निर्देशों के लिए यहां कोणीय 1.x कंपाइलर के व्यवहार को प्राप्त करना बहुत कठिन लगता है।

@tbosch , @ThomasBurleson , ऑफ़लाइन उपयोग का मामला था जिस पर आपने थॉमस द्वारा कोणीय/सामग्री # 1206 में उठाए गए मुद्दों या लक्ष्यों से संबंधित चर्चा की थी? मैं सिर्फ 1.6.x और 2+ ढांचे के बीच व्यवहार परिवर्तन के आसपास अपना सिर लपेटने की कोशिश कर रहा हूं।

क्या इस मुद्दे पर कोई अपडेट हैं? शुरुआत में इसने कर्षण प्राप्त किया लेकिन मुझे लगता है कि अब इस पर कोई ध्यान नहीं दिया जा रहा है।

हाँ उस पर कोई अपडेट?

यह ऐसी चीज है जिसकी मुझे बहुत जरूरत है, आशा है कि यह प्रस्ताव ऊपर की ओर जाएगा।

यह अच्छा होगा, आज एहसास हुआ कि मैं प्रोग्रामेटिक रूप से/गतिशील रूप से निर्देशों को लागू नहीं कर सकता, दुखी हो गया।

+1
मेरे लिए भी ऐसा :)
मैं एक कस्टम निर्देश में बाध्यकारी कई निर्देशों को लपेटने का एक तरीका खोज रहा हूं जो मुझे चाहिए। उदाहरण के लिए :

<my-cmp [myDirective]="content"
        [isOpen]="myCondition"
        customProp2="customClass"
        customProp1="customText">
 ...
</my-cmp>

यह अच्छा होगा यदि मैं एक निर्देश बना सकता हूं जो उन सभी चीजों को लपेटता है ताकि मैं सभी पंक्तियों को कॉपी/पेस्ट किए बिना उनका पुन: उपयोग कर सकूं।

<my-cmp myCustomDirective>
</my-cmp>

और मेरे कस्टम निर्देश में

<ng-host [myDirective]="content"
        [isOpen]="myCondition"
        customProp2="customClass"
        customProp1="customText">
</ng-host>

इस मुद्दे की दूसरी वर्षगांठ पर आ रहा है! ईमानदारी से यह सुविधा इतनी उपयोगी होगी, यह हमें एक लाख रैपर बनाए बिना अत्यधिक कंपोजेबल घटक और निर्देश बनाने देती है। आपके पास मौजूद निर्देशों से केवल उस घटक की रचना करें जिसकी आपको आवश्यकता है। सरल, स्वच्छ, प्रभावी।

@IgorMinar - वैसे भी हम इस सुविधा को आगामी संवर्द्धन के लिए रडार पर प्राप्त कर सकते हैं?

मैं जानना चाहता हूं कि इस तरह की सुविधा को खराब पैटर्न माना जाएगा या नहीं। कोई भी?

@darkbasic - AFAIU, इस सुविधा के बिना, एक डेवलपर को केवल टेम्पलेट दृश्य और सामग्री में मूल निर्देश जोड़ने के लिए एक रैपर तत्व ( ng-container ) पेश करने की आवश्यकता होगी।

नहीं, मुझे नहीं लगता कि रैपर का उपयोग किए बिना अपने स्वयं के घटक पर पूर्ण नियंत्रण रखने में सक्षम होना एक खराब पैटर्न है। यह एक आवश्यकता है।

@bradlygreen कोई टिप्पणी?

यह सुविधा इस रेपो के सभी खुले मुद्दों में सबसे लोकप्रिय अनुरोध (यदि शीर्ष 5 नहीं है) है ... इंटरनेट पर हम डिफैक्टो फ्रेमवर्क के रूप में कोणीय के पतन की रिपोर्ट (अनुभवजन्य डेटा द्वारा समर्थित) देख रहे हैं ... मुझे लगता है ड्राइविंग करने वाली चीजों में से एक यह भावना है कि समुदाय को नहीं सुना जा रहा है। प्रतियोगिता; vue.js और प्रतिक्रिया, जमीन हासिल कर रहे हैं और कोणीय से आगे निकल गए हैं क्योंकि भले ही वे हर उस छोटी चीज को लागू नहीं कर सकते जो हर कोई चाहता है कि वे कम से कम सबसे लोकप्रिय अनुरोधित वस्तुओं के बारे में निरंतर प्रतिक्रिया प्रदान करें। इतना लंबा इंतजार करना और कुछ नहीं सुनना कितना निराशाजनक है.. एक साधारण "नहीं, हम ऐसा नहीं करेंगे" भी नहीं।

(देखें "कोणीय पर्ची" जेएस फ्रेमवर्क अनुभाग)

... हालांकि मुझे लगता है कि एंगुलर / वीयू / रिएक्ट / ... के बारे में कुछ राय विभिन्न कारकों से प्रभावित हैं ... लागू निर्देशों की एक सरल सूची के साथ समाधान) ... इसलिए कोणीय कोर टीम की ठोस स्थिति का बहुत स्वागत होगा ... 🥇

कोई विशिष्ट ईटीए नहीं, लेकिन हम 2018 में रेंडरर में इस श्रेणी की चीजों को बहुत आसान बनाने की दिशा में काम कर रहे हैं।

उम्मीद है कि 2018 में चीजें काफी बेहतर होंगी। हम हार रहे हैं

देखो:

• https://www.businesswire.com/news/home/20180104005052/hi/npm-Report-State-JavaScript-Reveals-Popular-Web
• https://medium.com/@chriscordle/why -angular-2-4-is-too-little-too-late-ea86d7fa0bae

@somombo इस लेख के बहुत समय पहले बकवास होने की पुष्टि हुई थी

जो लोग वास्तव में उनके सामान को जानते हैं, उन्होंने लेखक का मज़ाक उड़ाया और उनमें से किसी ने भी उसे गंभीरता से नहीं लिया, पसंद प्रतिक्रिया, वाउ फैनबॉय, स्वाभाविक रूप से हैं।

तो इस मामले का तथ्य यह है कि यहां यह मुद्दा कोणीय टीम के लिए बहुत कम प्राथमिकता है, वास्तव में यह संभवतः सबसे कम प्राथमिकता है।

AngularHQ पर प्रकाशित प्राथमिकता सूची देखें (अंक संख्या 8785 देखें)

इस मुद्दे के बावजूद समुदाय से बहुत चर्चा और रुचि उत्पन्न होने के बावजूद यह मामला है जैसा कि टिप्पणियों की संख्या से पता चलता है।

यदि आप ऐसे व्यक्ति हैं जो इस मुद्दे की परवाह करते हैं और वास्तव में इसे लागू होते देखना चाहते हैं, तो प्रतीक्षा करने के बजाय .. ईमानदारी से _संभावित रूप से कभी नहीं, शायद आप आधिकारिक वार्षिक कोणीय सर्वेक्षण भर सकते हैं, और बता सकते हैं कि आप इस मुद्दे की तरह महसूस करते हैं। एक उच्च प्राथमिकता होनी चाहिए और इसे बाद में जल्द से जल्द पूरा करने की सराहना करेंगे।

हमारी एंगुलर टीम को उनके द्वारा किए गए सभी महान कार्यों के लिए धन्यवाद देना न भूलें!

मैं भी इस सुविधा के लिए अपना वोट देना चाहूंगा। यह इस मुद्दे को हल करने की कोशिश में बहुत अधिक दुःख का कारण रहा है।

@somombo कृपया अभी तक AngularHQ में प्राथमिकता में बहुत अधिक न पढ़ें। प्राथमिकता सूत्र पूरी तरह से समाप्त नहीं हुआ है। यह कहने के बाद, मुझे लगता है कि हमें v6 जहाजों के बाद इस सुविधा अनुरोध पर फिर से विचार करना चाहिए। मुझे डर है कि हमारे पास इसके लिए जल्द ही बैंडविड्थ नहीं है और इस पर काम करना कंपाइलर/कोर क्षेत्र में पहले से चल रहे काम के साथ संघर्ष करेगा।

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

@IgorMinar आइवी कार्य इसे और अधिक व्यवहार्य बनाता है। लेकिन हाँ पिछले v6.

@IgorMinar और @mhevery मैं इस बात पर जोर नहीं दे सकता कि मैं कितना आभारी हूं (और हममें से बाकी भी, मुझे यकीन है) कि आपने हमें यह ठोस प्रतिक्रिया दी है कि आपके विचार क्या हैं और इस मुद्दे से पहले क्या होने की जरूरत है। ठीक से संबोधित किया जाए।

यह हमारे लिए हमेशा स्पष्ट नहीं होता है कि "त्वरित सुधार" क्या है और क्या नहीं। हालांकि, इस तथ्य को छोड़कर कि यह एक त्वरित सुधार प्रकार की चीज नहीं है और इसे सही किया जाना है, मैं विशेष रूप से सराहना करता हूं कि ऐसा लगता है कि आपको भी लगता है कि यह कोणीय के लिए एक उपयोगी सुविधा होगी।

हम जानते हैं कि आप दोनों बहुत व्यस्त हैं और हर एक मुद्दे पर इस तरह प्रतिक्रिया देने की संभावना नहीं है।
इसलिए जब भी आप ऐसा करते हैं तो आपकी हमारी हार्दिक कृतज्ञता है। हम उत्साहित हैं और कोणीय v6 और उससे आगे की प्रतीक्षा कर रहे हैं!

सभी महान कार्यों के लिए धन्यवाद!

आप घटक वर्ग को निर्देश वर्ग का विस्तार या कार्यान्वयन कर सकते हैं। यदि आप हुड के तहत निर्देश लागू करने का प्रयास कर रहे हैं, तो शायद यह घटक में तर्क होना चाहिए।

export class gBtn extends gTouch

@NateMay , जो आपको केवल एक वर्ग का विस्तार करने की अनुमति देता है। यह समस्या निर्देशों का उपयोग करके कार्यक्षमता के कई टुकड़ों की संरचना के बारे में अधिक है।

@NateMay इसके साथ दो समस्याएं - पहला, आप केवल एक ही वर्ग का विस्तार कर सकते हैं, और दूसरा, आपने निर्भरता इंजेक्शन को तोड़ा है।

बस मेरे दो सेंट जोड़ रहे हैं। मैं @uirouter/angular के नेस्टेड राज्यों का उपयोग करके कोणीय, सामग्री और फ्लेक्स-लेआउट के साथ एक बहु-परत एसपीए का निर्माण कर रहा हूं। फिर घटक तत्वों के लिए फ्लेक्स निर्देशों को आसानी से लागू करने में असमर्थता बहुत सीमित है।

तो कृपया इस सुविधा के लिए वोट करें।

इस अतिरिक्त सुविधा के लिए +1

एक निर्देश जोड़ना संभव है ng-container , जो DOM में दिखाई नहीं देगा।

मुझे चौराहे-पर्यवेक्षक एपीआई के लिए इसकी आवश्यकता थी (जो तत्वों को व्यूपोर्ट में प्रवेश/छोड़ने पर ईवेंट उठाता है)। मेरे पास intersector निर्देश है, जिसमें enter() और leave() ईवेंट हैं जब तत्व दृश्यमान/छिपा हुआ हो जाता है। मेरे पास कुछ घटक हैं जिन्हें आंतरिक रूप से इस एपीआई का उपयोग करने की आवश्यकता है, लेकिन मैं टेम्पलेट में अतिरिक्त डीआईवी नहीं जोड़ना चाहता था।

तो मैंने जो किया वह निम्नलिखित था component.html :

<ng-container intersector (enter)="weCameOnScreen()" (leave)="byeBye()">
     ... components normal template ...
</ng-container>

फिर intersector.directive.ts निर्देश निर्माता ElementRef इंजेक्ट करता है।

    constructor(private intersectorElementRef: ElementRef) { ... }

एक सामान्य डोम तत्व के लिए आप केवल intersectorElementRef.nativeElement पर काम करेंगे, लेकिन ng-container लिए नोड वास्तव में एक टिप्पणी नोड है। इसलिए मैं सिर्फ यह देखने के लिए जांच करता हूं कि क्या यह एक टिप्पणी है, और यदि यह है तो मैं एक स्तर ऊपर जाता हूं।

public ngAfterViewInit(): void 
{
    // if the directive is applied to an ng-container must go a level up
    this.domElement = (this.intersectorElementRef.nativeElement.nodeType == 8) ? this.intersectorElementRef.nativeElement.parentElement : this.intersectorElementRef.nativeElement;

   registerIntersector(this.domElement ...);

यह सभी स्थितियों के लिए काम नहीं करेगा, लेकिन मैं अभी इसके लिए ठीक हूं। मेरा मानना ​​​​है कि आईवीवाई कंपाइलर में वे अब टिप्पणियों का उपयोग नहीं कर रहे हैं - इसलिए यह टूट सकता है। महत्वपूर्ण बात यह थी कि मेरे पास एक ही निर्देश है जिसे मैं डोम नोड्स पर उपयोग कर सकता हूं या निर्देश के लिए नकली ' @HostBinding ' के रूप में प्रभावी रूप से क्या है।

मैं वास्तव में उम्मीद कर रहा था कि गतिशील रूप से निर्देश जोड़ना संभव था। मैं "उच्च क्रम", अधिक सार, निर्देशों में निचले स्तर के निर्देशों को समाहित करने में सक्षम होना चाहता हूं। मैंने स्टैक ओवरफ्लो पर निम्नलिखित प्रश्न पूछा, और मैं सोच रहा था कि क्या भविष्य में इसका कोई समाधान होगा: https://stackoverflow.com/questions/51608645/abstract-away-leaflet-directive-in-custom-directive

जैसा कि @mhevery ने कहा था.. हमें धैर्य रखने और पूर्ण संस्करण ivy (ng v7.0.0?) के उतरने की प्रतीक्षा करने की आवश्यकता है। जाहिरा तौर पर, उनके लिए आइवी के साथ लागू करना बहुत आसान होगा... आइवी के बाद, हमें टीम को यह याद दिलाना होगा कि यह सुविधा हमारे लिए कितनी महत्वपूर्ण है, इसलिए वे इसके बारे में नहीं भूलते

इसकी सदस्यता ले रहे हैं। मुझे उस घटक के लिए एक निर्देश को गतिशील रूप से संलग्न करने में सक्षम होना चाहिए जिसे मैंने संकल्प कॉम्पोनेंट फैक्ट्री/क्रिएट कॉम्पोनेंट के साथ बनाया है।

const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentItem.component);

const componentRef = viewContainerRef.createComponent(componentFactory);
(<DynamicComponent>componentRef.instance).data = componentItem.data;
(<DynamicComponent>componentRef.instance).cssClassList = componentItem.cssClassList;
// Add directive to new component here
// componentRef.addDirective(someDirective)

किसी भी अद्यतन???
मैं एक अन्य उपयोग-मामले में भाग गया जहां मैं तीसरे पक्ष के निर्देश का उपयोग कर रहा हूं
कुछ परिदृश्य में, मुझे गतिशील रूप से HTML तत्व पर निर्देश को हटाने/जोड़ने की आवश्यकता है।
क्या यह किसी भी तरह से संभव है या अभी तक समाधान लंबित है?

@micronyks ... वास्तव में गतिशील रूप से निर्देश जोड़ना संभव नहीं है। हमें आइवी का इंतजार करना होगा जो इस तरह की सुविधा बनाने की संभावना को जोड़े।

@mlc-mlapis लेकिन कोई योजना आईवीवाई कब आएगी? किस संस्करण में?

@micronyks ... शेड्यूल के अनुसार कोणीय 7।

दोस्तों यहां उचित होने दें, कोणीय टीम कई बड़ी विशेषताओं पर काम करने के लिए कड़ी मेहनत कर रही है, जिनकी अत्यधिक मांग है, (PWA, SSR, Ivy, और विशेष रूप से कस्टम तत्व) अंतिम एक बहुत ही उच्च प्राथमिकता वाली विशेषता है जैसा कि मैं समझ सकता था, क्योंकि बहुत कुछ बड़े उद्यम (जैसे Microsoft) हमेशा से इसके लिए पूछ रहे हैं, और इसका एक कारण है। कुशल कस्टम तत्वों को प्राप्त करने के लिए उन्हें आइवी की आवश्यकता होती है, जैसे ही वे आइवी के साथ होते हैं, जैसा कि @mhevery ने कहा, इंजन अधिक आसानी से गतिशील निर्देशों की अनुमति देगा।

इस बीच, इस सुविधा की मांग करने के बजाय (जिसकी मुझे उम्मीद से बीटीडब्ल्यू की भी आवश्यकता है), हम एंगुलर टीम को प्रक्रिया में तेजी लाने में मदद कर सकते हैं, बीटा का परीक्षण करके, बग की रिपोर्ट कर सकते हैं, डॉक्स के साथ मदद कर सकते हैं, आदि।

आइए याद रखें कि एंगुलर टीम इतनी बड़ी भी नहीं है, यह सिर्फ एक दर्जन लोग हैं जो हर किसी के लिए एक भयानक ढांचा बनाने की कोशिश कर रहे हैं, लेकिन इसमें समय लगता है।

... हां, अब थोड़ा धैर्य रखना आवश्यक है और उस क्षण तक प्रतीक्षा करें जब हम आइवी के साथ और अधिक मदद कर सकें ... जब कंपाइलर पूरा हो जाएगा और कुछ विवरण डिजाइन डॉक्स उपलब्ध होंगे।

@avatsaev मैं आपके द्वारा कही गई हर बात से सहमत हो सकता हूं। आपको यहां चीजों की मांग नहीं करनी चाहिए। लेकिन आप एंगुलर के साथ काम करते समय उन मुद्दों की व्याख्या कर सकते हैं जिनसे आप निपट रहे हैं।

मैं एक बहुत अनुभवी कोणीय डेवलपर होने के करीब कहीं नहीं हूं, लेकिन कुछ चीजें गलत लगती हैं या स्पष्ट रूप से पर्याप्त रूप से समझाया नहीं गया है।

मैं इस मुद्दे पर आया हूं क्योंकि मैं एक तीसरे पक्ष के घटक/निर्देश को संक्षिप्त करना चाहता हूं, बिना लीकी एब्स्ट्रैक्शन के। इसका एक हिस्सा गतिशील निर्देश प्राप्त करना संभव बना रहा है। मुझे जो आश्चर्य होता है वह यह है कि ऐसा हासिल करना काफी जटिल है।

मैं कोणीय सामग्री और फ्लेक्स-लेआउट का उपयोग करके एक फॉर्म जनरेटर का निर्माण कर रहा हूं, जो एक JSON कॉन्फ़िगरेशन लेता है और एक फॉर्म उत्पन्न करता है। यह सुविधा मुझे रनटाइम पर होस्ट घटक के लिए फ्लेक्स-लेआउट निर्देशों को लागू करने में मदद करेगी। मुझे लगता है कि कोणीय की सबसे बड़ी संपत्ति में से एक कॉन्फ़िगरेशन से रनटाइम पर कोड उत्पन्न करने की क्षमता है, यह उस कोड को और अधिक बहुमुखी बनाने के लिए एक लंबा रास्ता तय करेगा। बस एक अच्छे उपयोग के मामले में छोड़ना चाहता था। बेताब ;)

यह मेरा सटीक उपयोग मामला है

@NateMay यहां मेरा कार्यान्वयन है यदि आप इसे देखना चाहते हैं।

@NateMay यहां मेरा कार्यान्वयन है यदि आप इसे देखना चाहते हैं।

क्या आप कृपया समझा सकते हैं? मुझे लगता है कि आपका मतलब है गतिशील-क्षेत्र। निर्देश

dynamic-field.directive फैंसी सामान करता है लेकिन साथ ही साथ कई अन्य चीजें भी हो रही हैं। मैंने अभी रूट फ़ोल्डर में CONTRIBUTING.md जोड़ा है, जिसमें स्थानीय रूप से सेटअप करने के निर्देश हैं। कुछ महीनों के लिए उत्पादन में होने वाली किसी भी चीज़ में उपयोग करने से सावधान रहें। मैं बड़े बदलाव कर रहा हूं क्योंकि मैं एक स्थिर कार्यान्वयन की दिशा में काम कर रहा हूं।

+1

अब तक, मेरे कामकाज हैं, उन सभी में डाउनसाइड्स हैं।

1. has-it , मेरे घटक वर्ग के अंदर उस निर्देश के रूप में नई सदस्य संपत्ति को परिभाषित करें, उस निर्देश के लिए सभी आवश्यक कन्स्ट्रक्टर तर्कों को पास करें जब इसके कन्स्ट्रक्टर फ़ंक्शन को कॉल करें (उदाहरण के लिए ElementRef, ViewContainerRef, TemplateRef ... कोई इंजेक्शन योग्य चर जो यह पूछता है) , और मैन्युअल रूप से इसके जीवनचक्र कॉलबैक को कॉल करें यदि उसके पास है, जैसे ngInit() ngAfterViewInit() वर्तमान घटक के संबंधित जीवनचक्र कॉलबैक फ़ंक्शन पर।

@component(...)
class MyComponent {
   theDirective: TargetDirective;
   constructor(el: ElementRef) {
       this.theDirective = new TargeDirective(el);
   }

  ngOnInit() {
     this.theDirective.ngOnInit();
  }
  ...
}

1. एक शीर्ष-स्तरीय एनजी-टेम्पलेट के भीतर घटक टेम्पलेट में सब कुछ लपेटें,
   <ng-template><div targetDirective>....</div></ng-template> उन्हें ngAfterViewInit() में प्रस्तुत करें जैसे:

const vf = this.viewContainerRef.createEmbeddedView(this.templateRef);
vf.detectChanges();

इस तरह, कोणीय उस निर्देश के साथ एक और element बनाता है और उसके अंदर मेरे घटक की वास्तविक सामग्री DOM ट्री में मूल घटक तत्व के ठीक बाद होती है।

<my-component></my-component>
<div targetDirective>....</div>

यह तरीका वैसा ही है जैसा <route-outlet> करता है।

स्पष्ट दुष्प्रभाव हैं

क्या कोई पुष्टि कर सकता है कि क्या यह अब आइवी के साथ संभव है? यदि हां, तो क्या किसी के पास कोई उदाहरण है?

आइए याद रखें कि एंगुलर टीम इतनी बड़ी भी नहीं है, यह सिर्फ एक दर्जन लोग हैं जो हर किसी के लिए एक भयानक ढांचा बनाने की कोशिश कर रहे हैं, लेकिन इसमें समय लगता है।

योगदानकर्ताओं का समुदाय होने से यह बड़ा हो सकता है।

हालांकि, इसे स्वीकार किए जाने के लिए योगदान किए गए सुधार की संभावना बहुत कम है।

तो इसके बजाय हम एक दर्जन लोगों के पास वापस आ गए हैं।

क्या कोई पुष्टि कर सकता है कि क्या यह अब आइवी के साथ संभव है? यदि हां, तो क्या किसी के पास कोई उदाहरण है?

चूंकि अभी तक कोई शब्द नहीं आया है, मैंने सोचा कि मैं सबसे नज़दीकी चीज़ प्रदान करूंगा, जो कुछ समय पहले आइवी के साथ मिक्सिन को लागू करने के बारे में एक लेख है: https://blog.nrwl.io/metaprogramming-higher-order-components -और-मिश्रण-साथ-कोणीय-आइवी -75748fcbc310

लेख के अनुसार, मुझे लगता है कि इस धागे के मूल मुद्दे का एक संभावित समाधान ... "फीचर्स" नामक नई सुविधा का उपयोग करना है।

...आप कल्पना कर सकते हैं कि इस सुविधा के बारे में Google को कुछ भी करने का प्रयास करना एक बुरे सपने जैसा है। उम्मीद है कि वे जल्द ही कुछ आधिकारिक आइवी दस्तावेज जारी करेंगे! :)

@nayfin भी विजुअल फॉर्म डिज़ाइनर/बिल्डर का निर्माण कर रहा है
और तथ्य पर अटकने के लिए काम करने के कुछ महीनों के बाद मेरे पास गतिशील रूप से जोड़े गए div को निर्देश तैनात करने का कोई तरीका नहीं है मुझे पागल बनाता है .... कुछ MyDirectiveFactory::apply(HTMLElement) को कॉल करने के लिए इतना अनजान होना चाहिए

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

गतिशील रूप से निर्देश जोड़ने में सक्षम होने के लिए बहुत अच्छा होगा जैसे कि:

const msked = componentFactory.createDirective(MaskedInputDirective);
msked.textMaskConfig = {};
this.elementRef.directives.add(msked);

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

@tsteuwer आप हमेशा अपने

लेकिन हाँ, मैं मेजबान तत्व को निर्देश लागू करने की क्षमता भी चाहता हूं। मेजबान तत्व को स्क्रॉल करने योग्य बनाने और कोणीय सामग्री सीडीके से सीडीकेस्क्रॉल करने योग्य लागू करने के लिए उपयोगी होगा।

एक शीर्ष-स्तरीय एनजी-टेम्पलेट के भीतर घटक टेम्पलेट में सब कुछ लपेटें

इसका एक हल्का सा विकल्प है https://github.com/trotyl/angular-contrib का उपयोग करना और जोड़ना

host: { ngNoHost: '' }

यह प्रोजेक्ट रेंडरर को शर्मसार करता है और तत्वों के बच्चों को ngNoHost विशेषता, बिना माता-पिता के साथ प्रस्तुत करता है।

इसमें निश्चित रूप से समान कमियां हैं।

अफ़सोस यह 3 साल बाद भी खुला है। तत्व को होस्ट करने के लिए बाध्य निर्देश वास्तव में कोड पुन: उपयोग-क्षमता में सुधार करेंगे।

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

@tsteuwer आप हमेशा अपने

लेकिन हाँ, मैं मेजबान तत्व को निर्देश लागू करने की क्षमता भी चाहता हूं। मेजबान तत्व को स्क्रॉल करने योग्य बनाने और कोणीय सामग्री सीडीके से सीडीकेस्क्रॉल करने योग्य लागू करने के लिए उपयोगी होगा।

आदर्श नहीं है लेकिन आप सीडीकेस्क्रॉल करने योग्य प्रोग्रामेटिक रूप से इस तरह बना सकते हैं:
this.scrollable = नया CdkScrollable(this.elementRef, this.scrollDispatcher, this.zone);
this.scrollable.ngOnInit ();

आपको इसे मैन्युअल रूप से भी नष्ट करना होगा:
अगर (यह। स्क्रॉल करने योग्य) {
this.scrollable.ngOnDestroy ();
}

https://github.com/angular/angular/issues/8785#issuecomment -361004682 IgorMinar आइवी कार्य इसे और अधिक व्यवहार्य बनाता है। लेकिन हाँ पिछले v6.

@mhevery आपकी टिप्पणी के बाद: point_up_2:, अब जब आइवी पूरी तरह से उतर चुका है, तो क्या हम इस सुविधा को (या पहले) v10 की रिलीज़ पर प्राप्त कर सकते हैं? यदि नहीं, तो कृपया हमें अपडेट करें कि कौन से अन्य विचार इसे और पीछे रोक सकते हैं।

क्या कोई बदलाव हैं?

यदि यह विशिष्ट विशेषता कोणीय सर्वेक्षण https://twitter.com/angular/status/1252646001162088448?s=20 पर थी, तो मुझे यकीन है कि यह शीर्ष वोट वाली प्रविष्टि होगी।

ऐसी कई विशेषताएं हैं जिन्हें सबसे अधिक वोट दिया जाएगा, यह सुनिश्चित करने के लिए लेकिन @output और कई अन्य के लिए वेधशालाओं का उपयोग भी कर रहा है। दुर्भाग्य से वर्तमान गति से वे कभी लागू नहीं होंगे।

यदि यह विशिष्ट विशेषता कोणीय सर्वेक्षण पर थी, तो मुझे यकीन है कि यह शीर्ष मतदान वाली प्रविष्टि होगी।

बढ़िया विचार @princemaple!

हालांकि आदर्श नहीं है, इसे वास्तव में सर्वेक्षण के "अतिरिक्त टिप्पणियों" खंड (प्रश्न 2 के) में संबोधित किया जा सकता है
यह कहां कहा गया है:

"How else should we improve Angular for you?"

इसलिए मूल रूप से, इस सुविधा को देखने में रुचि रखने वाले प्रत्येक व्यक्ति, कृपया केवल सर्वेक्षण का उत्तर दें और इसे स्पष्ट रूप से बताएं, कि आप "समस्या #8785" को लागू और हल करते हुए देखने के बारे में बहुत परवाह करते हैं।

यहां सर्वेक्षण का सीधा लिंक दिया गया है:
https://goo.gle/angular-survey-2020

बल आपके साथ हो! मैं

मैं भी घटकों के लिए प्रोग्रामिक रूप से अधिक कार्यक्षमता जोड़ने के लिए संघर्ष कर रहा हूं, और ईमानदारी से मुझे लगता है कि यहां कुछ प्रस्ताव उन विशिष्ट समस्याओं से निपटने के सर्वोत्तम तरीकों की तरह प्रतीत होते हैं।

मैंने उस लेख के संबंध में कोणीय टीम के सदस्यों से बात की है

क्या कोई पुष्टि कर सकता है कि क्या यह अब आइवी के साथ संभव है? यदि हां, तो क्या किसी के पास कोई उदाहरण है?

चूंकि अभी तक कोई शब्द नहीं आया है, मैंने सोचा कि मैं सबसे नज़दीकी चीज़ प्रदान करूंगा, जो कुछ समय पहले आइवी के साथ मिक्सिन को लागू करने के बारे में एक लेख है: https://blog.nrwl.io/metaprogramming-higher-order-components -और-मिश्रण-साथ-कोणीय-आइवी -75748fcbc310

और मूल रूप से इस धारणा के लिए नेतृत्व किया गया था कि यह कोणीय के आंतरिक के साथ हैकिंग कर रहा है, और यह वास्तव में सामान्य उपयोगकर्ता खपत के लिए डिज़ाइन नहीं किया गया था।

मुझे यकीन नहीं है कि क्या होगा यदि कोई तकनीकी कारण मौजूद है जो हमें ऐसा करने में सक्षम होने से रोकता है, लेकिन मुझे लगता है कि अगर हमारे पास ऐसा करने की क्षमता है, तो यह मेरे दिन-प्रतिदिन कोणीय के साथ सुधार करेगा।

"हमने समुदाय के साथ काम करने में अपने निवेश में नाटकीय रूप से वृद्धि की है। पिछले तीन हफ्तों में हमारी ओपन इश्यू काउंट में फ्रेमवर्क, टूलिंग और कंपोनेंट्स में 700 से अधिक मुद्दों की कमी आई है। हमने 2,000 से अधिक मुद्दों को छुआ है, और हम अगले कुछ महीनों में बड़े निवेश करने की योजना बना रहे हैं, और अधिक करने के लिए समुदाय के साथ काम कर रहे हैं।" — @StephenFluin
कोणीय 10 घोषणा से

तो मुझे लगता है कि इसका मतलब है कि हम इस मुद्दे को v11 में रद्द होते देखेंगे? मैं

उनकी सबसे अनुरोधित सुविधाओं में से एक को जोड़ने पर काम करने की तुलना में "समुदाय के साथ काम करने" (और उन्हें खुश करने) का इससे बेहतर तरीका क्या हो सकता है !? (यह एक )

उन्हें सुनें!

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

@mhevery यह उन्हें टेम्प्लेट में माता-पिता से लागू करने से कैसे अलग है?

@ k3nsei इसे NgModule दृष्टिकोण से देखना आवश्यक है, जो वास्तव में मुख्य तत्व है जो इसके सभी घटकों के लिए आधारभूत संरचना बनाता है।

@ mlc-mlapis हमारे पास @HostBinding और @HostListener है, इसलिए शायद @HostDirective उस कार्यक्षमता के लिए अच्छा विकल्प होगा। मैंने बातचीत देखी है कि आइवी एपिस ऐसी कार्यक्षमताओं को सक्षम बनाता है।

मेरे लिए मुख्य बिंदु कुछ संरचना एपीआई है जो हमें कार्यक्षमता के पुन: प्रयोज्य जंक के साथ एक्सटेंशन/लक्षण रखने की क्षमता वाले अधिक डिकूप्ड कक्षाओं की अनुमति देगा। उदाहरण के लिए चयन योग्य, विस्तार योग्य/बंधनेवाला।

@ k3nsei यह हो सकता है, लेकिन मुझे यकीन नहीं है कि यह बहुत गतिशील नहीं है, सख्ती से स्थिर संरचनाओं की तुलना में इतना कम प्रदर्शन करने वाला है।

"बस उम्मीदों को निर्धारित करने के लिए, आप जो पूछ रहे हैं वह मामूली मात्रा में काम नहीं है और वर्तमान डेटा संरचनाएं वास्तव में इसके लिए डिज़ाइन नहीं की गई हैं। इसलिए इस तरह कुछ का समर्थन करने के लिए कुछ प्रमुख इंजीनियरिंग की आवश्यकता होगी।" - https://github.com/angular/angular/issues/8785#issuecomment -654391378

आपकी सामयिक प्रतिक्रिया के लिए धन्यवाद @mhevery.

मुझे लगता है कि मैं समुदाय के लिए यह कहकर बोलूंगा कि यह हम पर बिल्कुल भी नहीं है कि यह एक बहुत बड़ी चुनौती होगी। यदि ऐसा नहीं होता, तो मुझे यकीन है कि अब तक हम कुछ तृतीय-पक्ष पुस्तकालय बना चुके होंगे जो इसे ठीक से (किसी तरह) प्राप्त करते हैं। [मेरी जानकारी में ऐसा कोई नहीं है]।

इसके अलावा, बिना कहे चला जाता है, कृपया हमें बताएं कि क्या कुछ कम लटकने वाले फल हैं (या अन्यथा) कि हम इसमें योगदान करने में सहायता कर सकते हैं।

हम ईमानदारी से आपको धन्यवाद देते हैं और आपके गंभीर संचार को महत्व देते हैं और आशा करते हैं कि हम उस संवाद का हिस्सा बने रहेंगे जिसकी हमें आवश्यकता है बनाम जो जोड़ने के लिए यथार्थवादी/व्यावहारिक है।

हालांकि मेरी समझ यह है कि आइवी इसे पहले की तुलना में आसान बना देता है।

@महेवरी

@IgorMinar आइवी कार्य इसे और अधिक व्यवहार्य बनाता है। लेकिन हाँ पिछले v6.

हालांकि मेरी समझ यह है कि आइवी इसे पहले से आसान बना देता है

मेरी नई समझ "आसान" अभी भी "आसान" नहीं है

मेरी नई समझ "आसान" अभी भी "आसान" नहीं है

आइवी: जिस चीज़ पर आपने दो साल बिताए और अभी भी सबसे लोकप्रिय कोणीय मुद्दों में से किसी को संबोधित नहीं किया है।

आइवी: जिस चीज़ पर आपने दो साल बिताए और अभी भी सबसे लोकप्रिय कोणीय मुद्दों में से किसी को संबोधित नहीं किया है।

@pauldraper मुझे लगता है कि हमारे मुद्दे उनके "मुद्दे" नहीं हैं क्योंकि यह विशेष रूप से उनके रडार पर भी नहीं है (देखें रोडमैप https://angular.io/guide/roadmap)।

मेरे लिए व्यक्तिगत रूप से, मुझे लगता है कि यह मेरे लिए एक ऐसी परियोजना के लिए कहीं और देखने का समय है जो न केवल खुला स्रोत है बल्कि एक ऐसी परियोजना है जिसकी दिशा में समुदाय (और उपयोगकर्ता) का वास्तविक प्रभाव है।

@pauldraper मुझे लगता है कि हमारे मुद्दे उनके "मुद्दे" नहीं हैं क्योंकि यह विशेष रूप से उनके रडार पर भी नहीं है (देखें रोडमैप https://angular.io/guide/roadmap)।

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

रोडमैप पर पहला बिंदु स्पष्ट रूप से खुले जीथब मुद्दों को संभालने के बारे में है। उन सभी को रोडमैप पर सूचीबद्ध करने का अधिक अर्थ नहीं होगा, है ना? यह मुद्दा सबसे ज्यादा वोट देने वाले (या सबसे ज्यादा वोट देने वाले) में से एक है और मुझे उम्मीद है कि इसे आखिरकार सुलझा लिया जाएगा।

नहीं, यह सिर्फ इच्छाधारी सोच है, https://github.com/angular/angular/issues/5689 के माध्यम से पढ़ें, "दृढ़ता से टाइप किए गए रूपों" के अलावा, कोई भी संकेत नहीं है कि वे किसी भी सबसे ऊपर वाले मुद्दों से निपटना चाहते हैं। भविष्य

@pauldraper मुझे लगता है कि हमारे मुद्दे उनके "मुद्दे" नहीं हैं क्योंकि यह विशेष रूप से उनके रडार पर भी नहीं है (देखें रोडमैप https://angular.io/guide/roadmap)।

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

वही सब .. मैं इंतज़ार कर रहा हूँ.. यह मुद्दा मेरे लिए बहुत बड़ा अवरोधक रहा है। तो तथ्य यह है कि ऐसा नहीं लगता कि यह किसी भी समय की योजना बनाई जा रही है, इसका मतलब है कि यह मेरे लिए व्यक्तिगत रूप से आगे बढ़ने का समय है। बाकी सभी को शुभकामनाएँ।

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

मैं इसे कई बार चाहता था, मुख्यतः क्योंकि रचना संभावित रूप से विरासत की तुलना में कोणीय में पुन: उपयोग का एक क्लीनर रूप है। वंशानुक्रम क्लंकी हो सकता है क्योंकि कोई एकाधिक वंशानुक्रम नहीं है, कंस्ट्रक्टर मापदंडों को पारित करना पड़ता है, और कुछ कोणीय विशेषताएं विरासत में मिलने पर काम करती हैं, और अन्य को प्रत्येक पत्ती वर्ग में "पुनः कनेक्ट" होना पड़ता है।

मैं कल्पना करता हूं कि "निहित/संलग्न निर्देश" एक घटक-स्थानीय या निर्देश-स्थानीय निर्देश तत्काल रूप से काम कर रहे हैं, जिसके परिणामस्वरूप निर्देश चयनकर्ता को टेम्पलेट मार्कअप में मौजूद होने की आवश्यकता के बिना मेजबान तत्व पर तत्काल किया जा रहा है।

यहाँ एक उदाहरण है:

@Directive({
  selector: 'app-popup',
  attachDirectives: [
    FocusAreaDirective
  ]
})
export class PopupDirective {

  // Attached directives can be injected, just like template-declared directives today
  constructor(public focusArea: FocusAreaDirective) {
  }

}

संलग्न निर्देश पर @Input() और @Output() गुणों का उपयोग टेम्पलेट में किया जा सकता है, और संलग्न निर्देश पर जीवनचक्र विधियों को होस्ट घटक जीवनचक्र के भाग के रूप में कहा जाना चाहिए। संलग्न निर्देश मेजबान तत्व से भी जुड़ सकता है। मूल रूप से, यह आज एक टेम्पलेट-घोषित निर्देश की तरह कार्य करता है, लेकिन इसे टेम्पलेट में घोषित करने की आवश्यकता नहीं है।

मुझे लगता है कि यह सुविधा निर्देश संरचना के माध्यम से क्लीनर/सरल घटक आर्किटेक्चर को सक्षम करने, कोणीय को एक महत्वपूर्ण लाभ प्रदान करेगी।

आज, आपके पास 2 विकल्प हैं यदि आप इसी तरह के निर्देश का पुन: उपयोग करना चाहते हैं:

• आवश्यक है कि संबंधित निर्देशों का एक सेट हमेशा टेम्प्लेट मार्कअप में एक साथ घोषित किया जाए; और यदि कंस्ट्रक्टर में आवश्यक निर्देश मौजूद नहीं हैं, तो त्रुटियों का पता लगाएं और उन्हें फेंक दें। आवश्यक निर्देश एक ही तत्व पर घोषित किए जाने की आवश्यकता का कोई तरीका नहीं है। यह एक टेम्पलेट संलेखन और दस्तावेज़ीकरण के दृष्टिकोण से गड़बड़ है, और अतिरेक के कारण एक मजबूत एपीआई या अनुबंध नहीं है, लेकिन अन्यथा भयानक नहीं है।
• मेजबान निर्देश के भीतर संलग्न निर्देशों को मैन्युअल रूप से तत्काल करें, और आंतरिक निर्देशों के लिए कन्स्ट्रक्टर पैरामीटर, @ इनपुट/ @ आउटपुट गुण, होस्ट बाइंडिंग, और जीवन चक्र विधियों को

इसे दूसरे तरीके से रखने के लिए, सुविधा की अनुपस्थिति कभी-कभी स्वच्छ + सरल घटक उपयोग और स्वच्छ + सरल घटक संलेखन के बीच एक अनावश्यक व्यापार बंद कर देती है।

@जॉनक्रिम
ध्यान दें कि वास्तविक दुनिया के मामले में आपके कस्टम निर्देश में इनपुट होंगे, और आप उन्हें बदलना चाहते हैं और संलग्न निर्देश में इनपुट के रूप में पास करना चाहते हैं। शायद यह निर्देश डेकोरेटर विकल्पों में host विशेषताओं के समान सिंटैक्स के साथ किया जा सकता है।

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

ऐसे मामलों में जहां या तो नामकरण संघर्ष या नामकरण स्पष्टता के मुद्दे हैं (जो मैं रचना के लिए निर्देश डिजाइन करते समय बचने की कोशिश करूंगा), या जब इनपुट या आउटपुट को बदलने की आवश्यकता होती है, जिसे माता-पिता में संलग्न निर्देश को इंजेक्ट करके बहुत आसानी से नियंत्रित किया जा सकता है। निर्देश, और माता-पिता पर नए इनपुट या आउटपुट गुण बनाएं जो संलग्न निर्देशों को सौंपते हैं।

मैं सही खडा हूँ।
यह समस्या अब आधिकारिक रोडमैप के "भविष्य" खंड के अंतर्गत सूचीबद्ध है। देखें https://angular.io/guide/roadmap#support -adding-directives-to-host-elements

तत्वों को होस्ट करने के लिए निर्देश जोड़ने का समर्थन करें

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

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

इसे वहां रखने के लिए टीम को धन्यवाद! 🙏🏾