मैं एक स्ट्रिंग प्राप्त करने का प्रयास कर रहा हूं जो मुझे पृष्ठ तक पहुंचने के लिए उपयोग किया गया यूआरएल बताएगा - उदाहरण के लिए यदि कोई स्थानीयहोस्ट/संदेश/इनबॉक्स में नेविगेट करता है तो मैं मार्ग के 'संदेश' भाग को स्ट्रिंग के रूप में चाहता हूं।

अब तक मैंने ऐसा करने के लिए जिस कोड का उपयोग किया है वह है:

    import { Router, RouterModule, ActivatedRoute } from '@angular/router';

    @Component({
      selector: 'app-sub-nav',
      templateUrl: './sub-nav.component.html',
      styleUrls: ['./sub-nav.component.css']
    })
    export class SubNavComponent implements OnInit {

      constructor(private router: ActivatedRoute) { }

      ngOnInit() {

         console.log(this.router.snapshot);

      }
   }

जब मैं कंसोल में देखता हूं, तो यह संपूर्ण सक्रिय रूट ऑब्जेक्ट देता है, लेकिन अधिकांश गुण खाली होते हैं। स्नैपशॉट, बच्चे, माता-पिता आदि सहित। क्या मुझे कुछ याद आ रहा है?

बस एक त्वरित नोट - मार्ग बदलने पर हर बार अद्यतन करने के लिए मुझे इस स्ट्रिंग की आवश्यकता है। मैंने पहले राउटर ऑब्जेक्ट के साथ यह काम किया था, लेकिन यह हर बार रूट बदलने पर स्थिर रहता है।

4
Web Develop Wolf 2 अप्रैल 2018, 02:19

2 जवाब

सबसे बढ़िया उत्तर

बस एक त्वरित नोट - मार्ग बदलने पर हर बार अद्यतन करने के लिए मुझे इस स्ट्रिंग की आवश्यकता है। मैंने राउटर ऑब्जेक्ट के साथ पहले यह काम किया था, लेकिन यह हर बार रूट बदलने पर स्थिर रहता है।

Router NavigationEnd ईवेंट की सदस्यता लें।

नेविगेशनएंड - किसी नेविगेशन के सफलतापूर्वक समाप्त होने पर ट्रिगर होने वाले ईवेंट का प्रतिनिधित्व करता है

 ngOnInit() {
    this.router.events.subscribe(events => {
      if (events instanceof NavigationEnd) {
        console.log('NavigationEnd evnet', events);
      }
    })
  }

इसलिए, हर बार जब सफलतापूर्वक मार्गों पर नेविगेट किया जाता है तो इस घटना को ईवेंट ऑब्जेक्ट से निकाल दिया जाएगा:

{
 urlAfterRedirects: string
  toString(): string
  // inherited from router/RouterEvent
  id: number
  url: string
}

स्टैकब्लिट्ज उदाहरण

1
Yerkon 2 अप्रैल 2018, 03:51

नेविगेशन का इस्तेमाल आप कई तरह से कर सकते हैं। तो मैं आपको एक आसान सा जवाब देने के बजाय आपकी मदद करने के लिए इस तरह से जवाब दे रहा हूं। मेरा ऐप एक शॉपिंग कार्ट है लेकिन इस तरह मैं एक ऐसे उत्पाद की खोज करता हूं जो शीर्ष बिक्री/नई पुनर्खरीद है, और केवल सामान्य खोज है। आपके मामले में, स्थान: /messages/inbox और searchStr = messageStr. इस तरह आप नेविगेट करते हैं।

goToMessage(searchStr: string){
if(this.productQuery.isTopSelling) 
  this._router.navigate(['/' + location + '/' + searchStr], 
    {queryParams: {isTopSelling: true}});
else if(this.productQuery.newPreRepurbished != 'none')
  this._router.navigate(['/' + location + '/' + searchStr], 
    {queryParams: {npr: this.productQuery.newPreRepurbished}});
else this._router.navigate(['/' + location + '/' + searchStr]);
}

मार्ग से जानकारी प्राप्त करने का तरीका यहां दिया गया है।

   this.route.queryParams.subscribe(
    params=>{
      let messageStr =  params['id']; //how you retrieve the message
      let isTopSelling = params['isTopSelling'] || false; //search by boolean
      let newPreRepurbished = params['npr'] || 'none';
      let brand = params['brnd'] || 'none'; //search by string
    });

आप queryParams का उपयोग करके मार्ग पर अधिक जानकारी भेज सकते हैं। मुझे आशा है कि मैं आपको भ्रमित नहीं कर रहा हूँ। उम्मीद है की यह मदद करेगा। हैप्पी कोडिंग।

क्योंकि आपको एक स्थिर उत्तर मिलता है (बदल नहीं रहा है), आपको ऑनचेंज को लागू करने की आवश्यकता हो सकती है।

ngOnChanges(){
  this.ngOnInit();
}
0
harold_mean2 2 अप्रैल 2018, 00:53