पुनः लोड कोणीय 4 एक ही URL पैरामीटर

Question

मैं एक कोणीय 4+ मार्ग पुन: लोड में कुछ शोध कर रहा हूँ और यह लग रहा है के साथ मार्ग के रूप में पसंदीदा तरीका बजाय घटक के भीतर URL पैरामीटर परिवर्तन और पुन: आरंभ करने के लिए सुनने के लिए है अगर इसके बजाय घटक।

मुद्दा मैं आ रही है जब URL समान होगा (पैरामीटर सहित), एक सूखी (अपने आप को दोहराने नहीं है) कई घटकों भर में इस काम करने के लिए दृष्टिकोण खोजने की कोशिश में है। AngularJS में यह यूआई-राउटर के साथ आसान था।

उपयोग मामला:

मैं एक अधिसूचना पैनल किसी भी मार्ग से ऊपर "फ्लोट", जब एक अधिसूचना क्लिक किया जाता है सकते हैं, जो यह सामग्री यह करने के लिए संबंधित के लिए जाने की जरूरत है है - इस के विभिन्न प्रकार किया जा सकता है सामग्री।

उदाहरण के लिए: /posts/:id या /groups/:id या /users/:id

उपयोगकर्ता पहले से ही है कि सामग्री यह लोड नहीं होता है और अधिसूचना के संदेश को प्रतिबिंबित करने के ताज़ा को देख रहा है। आई। "जॉन डो ने आपकी पोस्ट पर टिप्पणी की" (उपयोगकर्ता उस पोस्ट के पुराने संस्करण को देख सकता था) या "जेन डो ने कुछ समूह में शामिल होने का अनुरोध स्वीकार कर लिया" (उपयोगकर्ता उस समूह के अतिथि दृश्य को देख सकता था)।

मैं window.location.reload() का उपयोग करते समय का पता लगाने कि मार्ग में ही है इस पर गौर किया है, और है कि काम करता है, लेकिन यह भूमि के ऊपर यह कारण बनता है (कोणीय reinitialising, प्रमाणन जांच, सॉकेट पुनर्संयोजन, आदि) के कारण अत्यधिक अवांछनीय है।

किसी भी सुझाव की सराहना की जाएगी!

Answer 1

यूआरएल में कुछ भी नहीं बदला है जब मार्ग को फिर से लोड करने का कोई तरीका नहीं है। दरअसल, आपके पास केवल एक ही विकल्प हैं window.location.reload() और पैरामीटर बदलना सुनना।

दूसरा विकल्प के लिए, आप एक सामान्य सेवा है जो क्वेरी स्ट्रिंग में id तर्क के परिवर्तन देखेंगे बना सकते हैं। यह IdWatchService फोन और यह कुछ इस तरह दिखेगा करते हैं:

@Injectable() 
export class IdWatchService { 
    constructor(private route: ActivatedRoute) { 
    } 

    get idChange(): Observable<number | undefined> { 
    return this.route.queryParams.map(p => p['id'] as number | undefined).distinctUntilChanged(); 
    } 
} 

तो फिर तुम घटकों परिवर्तन (PostsComponent, GroupsComponent, आदि) के लिए प्रतिक्रिया करने की जरूरत है कि पर providers की सूची में इस सेवा को शामिल कर सकते हैं। और अंत में, आप इसे उन्हीं घटकों के लिए इंजेक्षन और idChange नमूदार की सदस्यता ले सकते:

@Component({ 
    templateUrl: './posts.component.html', 
    providers: [ 
    IdWatchService 
    ] 
}) 
export class PostsComponent { 
    constructor(idWatchService: IdWatchService) { 
    idWatchService.idChange.subscribe(id => { 
     // Load data for the new ID and refresh the view 
    }); 
    } 
} 

Answer 2

मैं वापस एक ही परिदृश्य (बहुत समान उपयोग के मामले) का सामना करना पड़ा कोणीय 2 में की तरह अन्य उत्तर कहा, मैं वहाँ पाया ऐसा करने के लिए कोणीय में कोई रास्ता नहीं बनाया गया था (हो सकता है कि ढांचागत धारणा यह है कि इस तरह के मामले को पैराम्स में बदलावों के लिए सुनकर हल किया जाना चाहिए)।

आप की तरह, मैं अपने कोड के पुनर्लेखन के लिए नहीं करना चाहता था, इसलिए मैं किसी अन्य समाधान है, इसकी थोड़ा अधिक hacky इस्तेमाल किया है, लेकिन यह बदलाव के लिए बहुत आवश्यकता के बिना काम किया।

समाधान मैं hirearchy के समान स्तर है जहाँ आप पृष्ठ पुनः लोड करने की आवश्यकता है के तहत एक डमी मार्ग का निर्माण कर रहा करते थे। डमी मार्ग में मैंने एक डमी कॉम्पोनेंट का उपयोग किया जो रूट पैराम डेटा में प्राप्त करता है जो बताता है कि हमें अगले मार्ग पर क्या जाना है (जिसे हम फिर से लोड करना चाहते हैं) और मुझे कौन से पैरा को पास करना चाहिए (जैसे आईडी उल्लेख किया है) और फिर मैंने उस मार्ग पर जाने के लिए नेविगेट विधि के साथ इंजेक्शन वाले राउंटर क्लास का उपयोग किया।

मुझे लगता है कि यह समाधान window.reload का उपयोग करने से अधिक कुशल होगा और लिखने के लिए यह बहुत आसान है। (मैं उस कोड उदाहरण की प्रतिलिपि नहीं बना सकता क्योंकि मेरे पास उस कोड तक पहुंच नहीं है)

Answer 3

window.location.reload();

यह मेरे लिए काम है।

Answer 4

इस मामले में आपका मार्ग नहीं बदलता है, बस आपके पैरामीटर बदलते हैं।

इस समस्या को हल करने के लिए आपको ActivatedRoute पैराम की सदस्यता लेने की आवश्यकता है।

export class MyClass implements OnInit { 
    constructor(private activatedRoute: ActivatedRoute) { 
     this.activatedRoute.params.subscribe((params)=>{ 
      console.log('updatedParams', params); 
     }); 
    } 
} 

Answer 5

मैं हैडर में अधिसूचना अनुभाग के साथ एक ही समस्या का सामना करना पड़ रहा था मैं DoCheck के साथ इस समस्या का समाधान कर लिया

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

कक्षा में DoCheck इंटरफ़ेस

export class HeaderComponent implements DoCheck { 

लागू तब का उपयोग ngDocheck() विधि और सत्यापित करें कि परिवर्तनीय मान में परिवर्तन यह आपके अधिसूचना क्षेत्र में दिखाएगा

ngDoCheck() { 
    // check if values changes 
} 

Answer 6

this.router.url द्वारा आपको वर्तमान पृष्ठ का यूआरएल मिलेगा। QueryParames के साथ राउटर नेविगेशन का उपयोग करने के बजाय। पेजिंग के लिए पृष्ठ के रूप में क्वेरी पैराम पास करने का उदाहरण निम्नलिखित है। आप समान दृष्टिकोण का उपयोग कर सकते हैं।

const url = this.router.url.split('?')[0]; // this will remove previous queryparms 
    this.router.navigate([url], { queryParams: { page: $event } });