meaning - angularjs tutorial pdf




मैं एंगुलर रूट किए गए घटकों को डेटा कैसे पास करूं? (8)

ActiveRoute के साथ समाधान (यदि आप मार्ग से ऑब्जेक्ट पास करना चाहते हैं - JSON.stringfy / JSON.parse का उपयोग करें):

भेजने से पहले वस्तु तैयार करें:

constructor(private activateRouter:ActivatedRouter){

}

गंतव्य घटक में अपनी वस्तु प्राप्त करें:

  ngOnInit() {
    this.sub = this.route
      .queryParams
      .subscribe(params => {
        // Defaults to 0 if no query param provided.
        this.page = +params['serviceId'] || 0;
      });
  }

मेरे एक कोणीय 2 मार्गों के टेम्पलेट्स ( FirstComponent ) में मेरे पास एक बटन है

first.component.html

<div class="button" click="routeWithData()">Pass data and route</div>

मेरा लक्ष्य हासिल करना है:

बटन क्लिक -> डेटा को संरक्षित करते हुए और निर्देश के रूप में अन्य घटक का उपयोग किए बिना किसी अन्य घटक के लिए मार्ग।

यही मैंने कोशिश की ...

1ST APPROACH

उसी दृश्य में मैं उपयोगकर्ता सहभागिता के आधार पर समान डेटा एकत्र कर रहा हूं।

first.component.ts

export class FirstComponent {
     constructor(private _router: Router) { }

     property1: number;
     property2: string;
     property3: TypeXY; // this a class, not a primitive type

    // here some class methods set the properties above

    // DOM events
    routeWithData(){
         // here route
    }
}

आम तौर पर मैं द्वारा SecondComponent के लिए मार्ग होगा

 this._router.navigate(['SecondComponent']);

अंततः डेटा पास करके

 this._router.navigate(['SecondComponent', {p1: this.property1, p2: property2 }]);

जबकि मापदंडों के साथ लिंक की परिभाषा होगी

@RouteConfig([
      // ...
      { path: '/SecondComponent/:p1:p2', name: 'SecondComponent', component: SecondComponent} 
)]

इस दृष्टिकोण के साथ मुद्दा यह है कि मुझे लगता है कि मैं जटिल डेटा (जैसे प्रॉपर्टी 3 जैसी कोई वस्तु ) पास नहीं कर सकता ;

2 एन डी अप्रोच

FirstComponent में निर्देश के रूप में SecondComponent सहित एक विकल्प होगा।

  <SecondComponent [p3]="property3"></SecondComponent>

हालाँकि मैं उस घटक को रूट करना चाहता हूं, लेकिन इसमें शामिल नहीं है!

3 आरडी अप्रोच

सबसे व्यवहार्य समाधान जो मैं यहां देख रहा हूं वह एक सेवा (जैसे FirstComponentService) का उपयोग करना होगा

  • मार्ग में डेटा (_firstComponentService.storeData ()) को पहली सूची में संग्रहीत करें
  • डेटा को पुनः प्राप्त करें (_firstComponentService.retrieveData ()) ngOnInit () में दूसराComponent

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

सामान्य तौर पर मैं जानना चाहता हूं कि क्या मैं घटकों के बीच डेटा पारित करने के लिए अन्य संभावित दृष्टिकोणों को याद कर रहा हूं, विशेष रूप से कोड की कम संभव राशि के साथ


JSON का उपयोग करके पास करें

export class PageComponent implements OnInit {
  state$: Observable<object>;

  constructor(public activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.state$ = this.activatedRoute.paramMap
      .pipe(map(() => window.history.state))
  }
}

कस्टम इंडेक्स के साथ डेटा स्टोर करने के लिए एक साझा सेवा का उपयोग करें। फिर उस कस्टम इंडेक्स को queryParam के साथ भेजें। यह दृष्टिकोण अधिक लचीला है

// component-a : typeScript :
constructor( private DataCollector: DataCollectorService ) {}

ngOnInit() {
    this.DataCollector['someDataIndex'] = data;
}

// component-a : html :
<a routerLink="/target-page" 
   [queryParams]="{index: 'someDataIndex'}"></a>

// component-b : typeScript :
public data;

constructor( private DataCollector: DataCollectorService ) {}

ngOnInit() {
    this.route.queryParams.subscribe(
        (queryParams: Params) => {
            this.data = this.DataCollector[queryParams['index']];
        }
    );
}

कुछ सुपर स्मार्ट व्यक्ति (tmburnell) जो मुझे मार्ग डेटा को फिर से लिखने का सुझाव नहीं देते हैं:

let route = this.router.config.find(r => r.path === '/path');
route.data = { entity: 'entity' };
this.router.navigateByUrl('/path');

जैसा कि here टिप्पणियों में देखा गया here

मुझे आशा है कि किसी को यह उपयोगी लगेगा


घटकों के बीच डेटा साझा करने के लिए तीसरा तरीका सबसे आम तरीका है। आप उस आइटम सेवा को इंजेक्ट कर सकते हैं जिसे आप संबंधित घटक में उपयोग करना चाहते हैं।

goToPage(pageNum) {
    this.router.navigate(['/product-list'], { queryParams: { serviceId: serviceId} });
}

मुझे लगता है क्योंकि हमारे पास कोणीय 2 में $ rootScope तरह की चीज़ नहीं है जैसा कि कोणीय 1.x में है। हम एनजीऑनस्ट्रो पास डेटा को सेवा में रखने के दौरान कोणीय 2 साझा सेवा / वर्ग का उपयोग कर सकते हैं और रूटिंग के बाद एनजीऑनइट फ़ंक्शन में सेवा से डेटा ले सकते हैं:

यहाँ मैं हीरो ऑब्जेक्ट साझा करने के लिए डेटा सेवा का उपयोग कर रहा हूँ:

import { Hero } from './hero';
export class DataService {
  public hero: Hero;
}

प्रथम पृष्ठ घटक से ऑब्जेक्ट पास करें:

 ngOnDestroy() {
    this.dataService.hero = this.hero; 
 }

दूसरे पृष्ठ के घटक से वस्तु लें:

 ngOnInit() {
    this.hero = this.dataService.hero; 
 }

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


4.0.0 अपडेट करें

अधिक जानकारी के लिए कोणीय डॉक्स देखें https://angular.io/guide/router#fetch-data-before-navigating

मूल

किसी सेवा का उपयोग करने का तरीका है। रूट परिमों में आपको केवल वह डेटा पास करना चाहिए जिसे आप ब्राउज़र URL बार में प्रतिबिंबित करना चाहते हैं।

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service भी https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

RC.4 के साथ भेजा गया राउटर data फिर से पेश data

constructor(private route: ActivatedRoute) {}
const routes: RouterConfig = [
  {path: '', redirectTo: '/heroes', pathMatch : 'full'},
  {path : 'heroes', component : HeroDetailComponent, data : {some_data : 'some value'}}
];
class HeroDetailComponent {
  ngOnInit() {
    this.sub = this.route
      .data
      .subscribe(v => console.log(v));
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

Https://github.com/angular/angular/issues/9757#issuecomment-229847781 पर प्लंकर भी देखें


<div class="button" click="routeWithData()">Pass data and route</div>

अच्छी तरह से इसे कोणीय 6 या अन्य संस्करणों में करने का सबसे आसान तरीका है, मुझे उम्मीद है कि आप अपने डेटा को आप जिस रास्ते से गुजरना चाहते हैं उसके साथ अपने रास्ते को परिभाषित करने के लिए बस

{path: 'detailView/:id', component: DetailedViewComponent}

जैसा कि आप मेरे मार्गों की परिभाषा से देख सकते हैं, मैंने राउटर नेविगेशन के माध्यम से घटक को डेटा पास करने के लिए /:id जोड़ा है। इसलिए आपका कोड दिखेगा

<a class="btn btn-white-view" [routerLink]="[ '/detailView',list.id]">view</a>

घटक पर id पढ़ने के लिए, जैसे ActivatedRoute आयात करें

import { ActivatedRoute } from '@angular/router'

और ngOnInit पर आप डेटा पुनर्प्राप्त करते हैं

ngOnInit() {
       this.sub = this.route.params.subscribe(params => {
        this.id = params['id'];
        });
        console.log(this.id);
      }

आप इस लेख में अधिक पढ़ सकते हैं https://www.tektutorialshub.com/angular-passing-parameters-to-route/







typescript