Passing and fetching routes data

Photo by Ravi Roshan on Unsplash

Route တွေခွဲပြီး pages သတ်မှတ်နိုင်ပြီဆိုရင် route ကနေ data တွေသယ်ယူပုံကိုလေ့လာရမှာ ဖြစ်ပါတယ်။

Passing Parameters

AppModuleမှာ route အသစ်တစ်ခု ထပ်ထည့်ပါမယ်။

const appRoutes: Routes = [
...
  {
    path: 'users/:id',
    component: UserComponent,
  },
...
];

:id ဆိုတာ data လက်ခံဖို့ variable ကြေငြာလိုက်တာပါ။ id နေရာမှာကြိုက်တဲ့နာမည် ပြောင်းရေးလို့ရတယ်။ အလုပ်လုပ်ပုံကတော့ —

localhost:4200/users/something ဆိုရင် something ကို id variable ထဲထည့်ပေးမှာပါ။

localhost:4200/users/1 ဆိုရင် 1 ကို ရရှိမှာပါ။

ဒီ route ကိုခေါ်ရင် UserComponent ကိုပြပေးဖို့ ရေးထားပါတယ်။ Browser URL မှာ localhost:4200/users/1 လို့ရေးရင် အခုလို တွေ့ရမှာပါ။

path: users/1

Fetching Parameters

Route မှာထည့်ပေးလိုက်တဲ့ parameter ကို ရယူဖို့အတွက် UserComponent မှာ အခုလိုရေးပါ။

HTML
<p>User id is: {{ user.id }}</p>
<p>User Name is: {{ user.name }}</p>
TypeScript
user: User = {
    id: -1,
    name: '',
  };
constructor(private route: ActivatedRoute) {}
ngOnInit() {
    this.user = {
      id: this.route.snapshot.params['id'],
      name: this.route.snapshot.params['name'],
    };
}

ActivateRoute ရဲ့ snapshot ကတစ်ဆင့် param ထုတ်ယူထားတာ တွေ့ရမှာပါ။

ဒီနေရာမှာ name ကိုပါ ထုတ်ယူထားတာမလို့ AppModule မှာအခုလို ပြင်ရေးပါ။

const appRoutes: Routes = [
...
  {
    path: 'users/:id/:name',
    component: UserComponent,
  },
...
];

ပြီးရင်တော့ browser မှာ localhost:4200/users/1/Maung လို့ခေါ်ရင် အခုလိုပြပေးမှာပါ။

path: users/1/Maung

ဒီနည်းနဲ့ parameter တွေကို ရယူနိုင်မှာဖြစ်ပါတယ်။

Fetching Parameters Reactively

လက်တွေ့သိရှိနိုင်ဖို့ UserComponent မှာ အခုလိုရေးပါ။

<a [routerLink]="['/users', 2, 'Anna']">Load Anna</a>

routerLink ကို property binding ပုံစံရေးလိုက်တာကြောင့် path ကို control လုပ်လို့ရသွားပါတယ်။ အခုလိုရေးလိုက်ရင် localhost:4200/users/2/Anna ကိုခေါ်ပေးမှာဖြစ်ပါတယ်။

Load Anna ကိုနှိပ်ရင်အခုလို URL ပြောင်းသွားတာတွေ့ရမှာပါ။

path: users/2/Anna

URL ပြောင်းသွားပေမဲ့ user id နဲ့ name မပြောင်းသွားပါ။ ဘာလို့လဲဆိုတော့ Angular က route အတွက် သတ်မှတ်ထားတဲ့ component ကို load လုပ်ပြီးသွားရင် ထပ်ပြီး မလုပ်ပေးတော့ပါ။

အခုဖြစ်စဥ်မှာ parameter ပြောင်းသွားပေမဲ့ route ကအတူတူမလို့ component ကို load ထပ်မလုပ်ပေးတာကြောင့် user id နဲ့ name က မပြောင်းသွားတာ ဖြစ်ပါတယ်။

အခုလိုမျိုး တစ်ချိန်ချိန်မှာ parameter ပြောင်းလဲသွားတာကို လက်ခံချင်ရင် ServerComponent မှာ အခုလိုရေးပါ။

ngOnInit() {
...
this.route.params.subscribe((params: Params) => {
      this.user.id = params['id'];
      this.user.name = params['name'];
    });
  }

ActivateRoute မှာ snapshot အပြင် params ဆိုတဲ့ Observable ရှိပါတယ်။ဒါကြောင့် parameter ပြောင်းရင် အသိပေးဖို့ subscribe လုပ်လိုက်တာ ဖြစ်ပါတယ်။

Observable ဆိုတာ async task တွေလုပ်ဖို့ Angular ကအသုံးပြုထားတဲ့ နည်းလမ်းတစ်ခုဖြစ်ပါတယ်။ အသုံးပြုဖို့အတွက် subscribe လုပ်ပေးရပြီး data ရလာရင် subscribe ရဲ့ callback function ကိုခေါ်ပေးပါတယ်။

ပြန်စမ်းကြည့်ရင်တော့ အခုလိုရလဒ်ကို တွေ့ရမှာပါ။

path: users/2/Anna

အခုအသုံးပြုခဲ့တဲ့ ActivatedRoute ရဲ့ params သည်မကြာခင်မှာ deprecated ဖြစ်တော့မှာမလို့ paramMap ကိုပြောင်းသုံးပေးပါ။ အသေးစိတ်ကို ဒီမှာ လေ့လာပါ။

Passing Query Parameters and Fragments

Route မှာ parameters တွေထည့်နိုင်သလိုပဲ query parameters နဲ့ fragments တွေကိုလည်း ထည့်နိုင်ပါတယ်။

AppModule မှာ route အသစ်တစ်ခုထပ်ထည့်ပါ။

const appRoutes: Routes = [
  ...
  {
    path: 'servers/:id/edit',
    component: ServerEditComponent,
  },
];

ServersComponent မှာ အခုလိုရေးပါ။

...
<ul class="list-group">
        <li
          class="list-group-item"
          *ngFor="let server of servers"
          [routerLink]="['/servers', 5, 'edit']"
          [queryParams]="{ allowEdit: '1' }"
          fragment="loading"
        >
          {{ server.name }}
        </li>
 </ul>
...

queryParams သည် Object တစ်ခုကိုလက်ခံပါတယ်။ fragment ကတော့ string တစ်ခုကို လက်ခံပါတယ်။ ဒီ နှစ်ခုလုံးက routerLink ရဲ့ property တွေဖြစ်ပါတယ်။

ပြီးရင်တော့ localhost:4200/servers ကိုသွားပြီး server တစ်ခုကို နှိပ်ကြည့်လိုက်ပါ။

path: servers/5/edit?allowEdit=1#loading

query param နဲ့ fragment တွေ ထည့်ပေးလိုက်တာ တွေ့နိုင်ပါတယ်။

ဒီလိုမျိုး routerLink ကနေတစ်ဆင့်ထည့်နိုင်သလို navigate ကနေလည်း လုပ်နိုင်ပါတယ်။ HomeComponent မှာ အခုလိုပြင်လိုက်ပါ။

HTML
<button class="btn btn-primary" (click)="onLoadServer(1)">Load Server 1</button>
TypeScript
onLoadServer(id: number) {
    this.router.navigate(['servers', id, 'edit'], {
      queryParams: { allowEdit: '1' },
      fragment: 'loading',
    });
}

navigate ရဲ့ second parameter မှာ queryParams နဲ့ fragment တွေကိုထည့်ပေးလိုက်တာဖြစ်ပါတယ်။ နှိပ်ကြည့်ရင်တော့ အခုလိုတွေ့ရမှာပါ။

navigate to servers with query params and fragment

Fetching Query Parameters and Fragments

Parameter ကို fetch လုပ်ယူသလိုပဲ snapshot နဲ့ရယူနိုင်သလို၊ subscribe လုပ်ပြီးတော့လည်း ရယူနိုင်ပါတယ်။

ServerEditComponent မှာအခုလိုရေးပါ။ ပြီးရင် log မှာလေ့လာကြည့်ပါ။

ngOnInit() {
    console.log(this.route.snapshot.queryParams);
    console.log(this.route.snapshot.fragment);
    this.route.queryParams.subscribe((params: Params) =>
    console.log(params));
    this.route.fragment.subscribe((value) => console.log(value));
}

queryParams သည်မကြာခင်မှာ deprecated ဖြစ်တော့မှာမလို့ queryParamMap ကိုပြောင်းသုံးပေးပါ။ အသေးစိတ်ကို ဒီမှာ လေ့လာပါ။

Upgrading Our App

တခြားသော လုပ်ဆောင်ချက်တွေ ဆက်မလေ့လာခင်မှာ အရင်ဆုံး code တစ်ချို့ကို ရေးကြပါမယ်။

UsersComponent မှာ အခုလိုထပ်ရေးပါ။

<li
   class="list-group-item"
   *ngFor="let user of users"
   [routerLink]="['/users', user.id, user.name]"
 >

UserComponent မှာ အခုလိုပြင်ပါ။

<p>User id is: {{ user.id }}</p>
<p>User Name is: {{ user.name }}</p>
<!-- <a [routerLink]="['/users', 2, 'Anna']">Load Anna</a> -->

ServersComponent မှာ အခုလိုပြင်လိုက်ပါ။ Reload Servers button ကိုဖြုတ်ပါ။ route မှာ “edit” ကိုဖြုတ်လိုက်ပါ။<app-server> နဲ့ <app-server-edit> တို့ကို comment ပိတ်လိုက်ပါ။

// remove "Reload Servers" button
<li
   class="list-group-item"
   *ngFor="let server of servers"
   [routerLink]="['/servers', server.id]"
   [queryParams]="{ allowEdit: '1' }"
   fragment="loading"
 >
...
<!-- <app-server></app-server> -->
<!-- <app-server-edit></app-server-edit> -->
...

AppModule မှာ route အသစ်တစ်ခု ထပ်ထည့်ပါ။

const appRoutes: Routes = [
  ...
  {
    path: 'servers/:id',
    component: ServerComponent,
  },
  ...
]

ServerComponent မှာအခုလိုရေးပါ။

HTML
<p>Server id is : {{ server.id }}</p>
<p>Server name is : {{ server.name }}</p>
<p>Server status is : {{ server.status }}</p>
TypeScript
constructor(
    private route: ActivatedRoute,
    private serverService: ServerService
  ) {}
ngOnInit() {
    this.route.params.subscribe((params: Params) => {
      this.server = this.serverService.getServer(+params['id']);
    });
}

ServerService မှာ ဒီလိုထပ်ရေးပါ။

getServer(id: number): Server {
    return this.servers.find((server) => server.id === id)!;
}

အားလုံးပြီးရင် app ကိုပြန်စမ်းကြည့်ပါ error မရှိဘူးဆိုရင် ရှေ့ဆက်လို့ရပြီဖြစ်ပါတယ်။

Previous: Navigating routes programmatically

Next: Nested Routes