Route တွေမှာ main route တွေရှိတဲ့အပြင် ဒီ route တွေကနေ ခွဲထွက်လာတဲ့ child route တွေရှိနိုင်ပါသေးတယ်။
AppModule ကိုကြည့်မယ်ဆိုရင် main route သုံးမျိုးကို တွေ့နိုင်ပါတယ်။ home, servers နဲ့ users တွေပါ။
တခြား route တွေကို main route တွေရဲ့ child route အဖြစ် ပြောင်းလိုက်လို့ ရပါတယ်။ ဒါကြောင့် AppModule မှာ အခုလိုပြောင်းလိုက်ပါ။
const appRoutes: Routes = [
{
path: '',
component: HomeComponent,
},
{
path: 'users',
component: UsersComponent,
children: [
{
path: ':id/:name',
component: UserComponent,
},
],
},
{
path: 'servers',
component: ServersComponent,
children: [
{
path: ':id',
component: ServerComponent,
},
{
path: ':id/edit',
component: ServerEditComponent,
},
],
},
];children ဆိုတဲ့ property အကူအညီနဲ့ child routes တွေ ခွဲချလိုက်တာပါ။ သတိထားရမှာက parent route ရဲ့ path ကို child မှာဖျက်လိုက်ပါ။ ဥပမာ — servers/:id ကို :id လို့ပဲရေးပါ။
ဒီလိုပြောင်းရုံနဲ့ မရသေးပါ။ child route တွေ render လုပ်ရမဲ့နေရာကို parent မှာ ပြောပေးဖို့လိုပါတယ်။
ဒါကြောင့် UsersComponent မှာအခုလိုရေးပါ။ app-user ကိုပိတ်ပြီး router-outlet ထည့်လိုက်တာပါ။
...
<div class="col-8">
<router-outlet></router-outlet>
<!-- <app-user></app-user> -->
</div>
...ServersComponent မှာလည်းပြင်ပေးပါ။
...
<div class="col-8">
<router-outlet></router-outlet>
<!-- <app-server></app-server> -->
<!-- <app-server-edit></app-server-edit> -->
</div>
...ပြီးရင်တော့ Servers နဲ့ Users tab က list တွေကိုနှိပ်ကြည့်ပါ။
Upgrading Our App
ခုဆိုရင် server နဲ့ user တစ်ခုချင်း ကြည့်လို့ရပြီ ဖြစ်ပေမဲ့ edit လုပ်လို့မရသေးပါ။ ဒါကြောင့် code တချို့ဆက်ရေးကြပါမယ်။
ServerComponent မှာ အခုလိုရေးပါ။
HTML
<button class="btn btn-primary" (click)="onEdit()">Edit</button>TypeScript
onEdit() {
this.router.navigate(['edit'], { relativeTo: this.route });
}
Router ကို @angular/router ကနေ import လုပ်ဖို့မမေ့ပါနဲ့။ လက်ရှိရောက်နေတဲ့ နေရာက servers/:id ဖြစ်လို့ /edit ကိုဆက်သွားချင်ရင် အခုလို relative path ပုံစံရေးလိုက်လို့ရပါတယ်။
URL ကိုကြည့်ပါ။ edit ကိုရောက်သွားရင် query params နဲ့ fragment တွေပျောက်သွားတာတွေ့ရမှာပါ။
ဒီလိုဖြစ်နေတာခဏထားပြီး တခြားလုပ်ဆောင်ချက်တွေကို ဆက်ရေးပါမယ်။
ServersComponent မှာဒီလိုပြင်ပါ။ server id က 3 ဖြစ်မှ Edit လုပ်ခွင့်ပြုမယ်လို့ ရေးလိုက်တာပါ။
<li
...
[queryParams]="{ allowEdit: server.id === 3 ? '1' : '0' }"
>ServerEditComponent template မှာ အခုလိုရေးပါ။
<h4 *ngIf="!allowEdit">You're not allowed to edit!</h4><div *ngIf="allowEdit">
<div class="form-group">
<label for="name">Server Name</label>
<input
type="text"
id="name"
class="form-control"
[(ngModel)]="server.name"
/>
</div>
<div class="form-group">
<label for="status">Server Status</label>
<select id="status" class="form-control"
[(ngModel)]="server.status">
<option value="online">Online</option>
<option value="offline">Offline</option>
</select>
</div>
<button class="btn btn-primary" (click)="onUpdate()">Update</button>
</div>
TypeScript မှာတော့ အခုလိုရေးပါ။
export class ServerEditComponent implements OnInit {
server: Server = { id: -1, name: '', status: 'offline' };
allowEdit = false;constructor(private route: ActivatedRoute) {}onUpdate() {}ngOnInit() {
this.route.queryParams.subscribe((params: Params) => {
this.allowEdit = params['allowEdit'] === '1';
});
this.route.fragment.subscribe((value) => console.log(value));
}
}
Query params နဲ့ fragment ပါမလာတဲ့ ပြဿနာကိုဖြေရှင်းဖို့ ServerComponent မှာအခုလိုရေးပါ။
onEdit() {
this.router.navigate(['edit'], {
relativeTo: this.route,
queryParamsHandling: 'preserve',
preserveFragment: true
});
}Query params ကိုဆက်သွားမဲ့ route မှာ ဘယ်လိုပုံစံနဲ့ သယ်မလဲဆိုတာ သတ်မှတ်လို့ရပါတယ်။
perserve ကိုရွေးရင်တော့ အသစ်ထည့်တဲ့ query params အားလုံးကိုဖယ်ချပြီး အရင်ကပါလာတဲ့ query params ကိုပဲ သယ်ပေးပါတယ်။
merge ကိုရွေးရင် အရင် query params နဲ့ အသစ်ထည့်တဲ့ query params ကိုပေါင်းပြီးသယ်ပေးပါတယ်။
ဒီမှာတော့ query params အသစ်မထည့်တော့တာကြောင့် preserve ကိုပဲရွေးပေးလိုက်ပါတယ်။
Fragment အတွက်ကတော့ fragment ကို ဆက်သယ်သွားချင်တယ် ဆိုရင် preserveFragment ကို true ပေးလိုက်ရင် ရပြီပဲဖြစ်ပါတယ်။
Previous: Passing and fetching routes data
Next: Routing Deep Dive
