typescript - কৌণিক 2: উপাদানটি রেন্ডার করার আগে ডেটা লোড করবেন কীভাবে?




angular angular2-services (2)

আপনি Angular2 + রেজোলভার ব্যবহার করে আপনার ডেটা প্রি-আনতে পারেন, আপনার উপাদান সম্পূর্ণরূপে লোড হওয়ার আগে সমাধানকারীরা আপনার ডেটা প্রক্রিয়া করে।

এমন অনেকগুলি ক্ষেত্রে রয়েছে যে আপনি যদি কিছু ঘটতে থাকে তবেই আপনি আপনার উপাদানটি লোড করতে চান, উদাহরণস্বরূপ ড্যাশবোর্ডে নেভিগেট করুন কেবলমাত্র যদি ব্যক্তি ইতিমধ্যে লগ ইন করে থাকে তবে এই ক্ষেত্রে সমাধানকারীরা খুব সহজ।

আপনার উপাদানটিকে ডেটা প্রেরণের জন্য আপনি যেভাবে রেজোলভারটি ব্যবহার করতে পারেন তার জন্য আমি আপনার জন্য তৈরি করা সহজ চিত্রটি দেখুন।

আপনার কোডে রেজোলভার প্রয়োগ করা খুব সহজ, রেজোলভারটি কীভাবে তৈরি করা যায় তা দেখার জন্য আমি আপনার জন্য স্নিপেট তৈরি করেছি:

import { Injectable } from '@angular/core';
import { Router, Resolve, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
import { MyData, MyService } from './my.service';

@Injectable()
export class MyResolver implements Resolve<MyData> {
  constructor(private ms: MyService, private router: Router) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<MyData> {
    let id = route.params['id'];

    return this.ms.getId(id).then(data => {
      if (data) {
        return data;
      } else {
        this.router.navigate(['/login']);
        return;
      }
    });
  }
}

এবং মডিউলটিতে :

import { MyResolver } from './my-resolver.service';

@NgModule({
  imports: [
    RouterModule.forChild(myRoutes)
  ],
  exports: [
    RouterModule
  ],
  providers: [
    MyResolver
  ]
})
export class MyModule { }

এবং আপনি এটির মতো আপনার উপাদানটিতে এটি অ্যাক্সেস করতে পারেন:

/////
 ngOnInit() {
    this.route.data
      .subscribe((data: { mydata: myData }) => {
        this.id = data.mydata.id;
      });
  }
/////

এবং রুটে এই জাতীয় কিছু (সাধারণত app.routing.ts ফাইলে):

////
{path: 'yourpath/:id', component: YourComponent, resolve: { myData: MyResolver}}
////

উপাদানটি রেন্ডার হওয়ার আগে আমি আমার এপিআই থেকে একটি ইভেন্ট লোড করার চেষ্টা করছি। বর্তমানে আমি আমার API পরিষেবাটি ব্যবহার করছি যা আমি উপাদানটির ngOnInit ফাংশন থেকে কল করি।

আমার EventRegister উপাদান:

import {Component, OnInit, ElementRef} from "angular2/core";
import {ApiService} from "../../services/api.service";
import {EventModel} from '../../models/EventModel';
import {Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig, RouteParams, RouterLink} from 'angular2/router';
import {FORM_PROVIDERS, FORM_DIRECTIVES, Control} from 'angular2/common';

@Component({
    selector: "register",
    templateUrl: "/events/register"
    // provider array is added in parent component
})

export class EventRegister implements OnInit {
    eventId: string;
    ev: EventModel;

    constructor(private _apiService: ApiService, 
                        params: RouteParams) {
        this.eventId = params.get('id');
    }

    fetchEvent(): void {
        this._apiService.get.event(this.eventId).then(event => {
            this.ev = event;
            console.log(event); // Has a value
            console.log(this.ev); // Has a value
        });
    }

    ngOnInit() {
        this.fetchEvent();
        console.log(this.ev); // Has NO value
    }
}

আমার EventRegister টেম্পলেট

<register>
    Hi this sentence is always visible, even if `ev property` is not loaded yet    
    <div *ngIf="ev">
        I should be visible as soon the `ev property` is loaded. Currently I am never shown.
        <span>{{event.id }}</span>
    </div>
</register>

আমার API পরিষেবা

import "rxjs/Rx"
import {Http} from "angular2/http";
import {Injectable} from "angular2/core";
import {EventModel} from '../models/EventModel';

@Injectable()
export class ApiService {
    constructor(private http: Http) { }
    get = {
        event: (eventId: string): Promise<EventModel> => {
            return this.http.get("api/events/" + eventId).map(response => {
                return response.json(); // Has a value
            }).toPromise();
        }     
    }     
}

ngOnInit ফাংশনে API কল করার আগে এই উপাদানটি উপস্থাপিত হয়ে ডেটা আনতে হবে। সুতরাং আমি কখনই আমার ভিউ টেমপ্লেটে ইভেন্ট আইডি দেখতে পাচ্ছি না। সুতরাং দেখে মনে হচ্ছে এটি ASYNC সমস্যা। আমি প্রত্যাশা করেছিলাম যে ev সম্পত্তিটি নির্ধারিত হওয়ার পরে কিছু কাজ করার জন্য EventRegister ( EventRegister উপাদান) বাঁধাই। দুঃখজনকভাবে সম্পত্তিটি সেট হয়ে গেলে এটি *ngIf="ev" দিয়ে চিহ্নিত *ngIf="ev" দেখায় না।

প্রশ্ন: আমি কি ভাল পন্থা ব্যবহার করছি? যদি না; উপাদান রেন্ডার শুরু হওয়ার আগে ডেটা লোড করার সর্বোত্তম উপায় কী?

দ্রষ্টব্য: এই কৌণিক 2 টিউটোরিয়ালে ngOnInit পদ্ধতির ব্যবহার করা হয়।

সম্পাদনা করুন:

দুটি সম্ভাব্য সমাধান। প্রথমে ছিল আনার fetchEvent এবং ngOnInit ফাংশনে ngOnInit API পরিষেবাটি ব্যবহার করা।

ngOnInit() {
    this._apiService.get.event(this.eventId).then(event => this.ev = event);
}

দ্বিতীয় সমাধান। দেওয়া উত্তরটি পছন্দ করুন।

fetchEvent(): Promise<EventModel> {
    return this._apiService.get.event(this.eventId);
}

ngOnInit() {
    this.fetchEvent().then(event => this.ev = event);
}

একটি দুর্দান্ত সমাধান যা আমি পেয়েছি তা হ'ল ইউআই তে কিছু করা:

<div *ngIf="isDataLoaded">
 ...Your page...
</div

কেবলমাত্র যখন: আইডাটালয়েডটি সত্য হয় পৃষ্ঠাটি রেন্ডার করা হয়।







angular2-http