angular - làm thế nào để lấy các tham số route trong angular2 RC5

Tôi đã nâng cấp dự án angular2 của mình lên RC5 bằng cách sử dụng angular-cli@webpack.

Tôi đã cung cấp định tuyến như sau:

const appRoutes: Routes = [
    { path: 'project-manager', component: ProjectManagerComponent },  
    { path: 'designer/:id', component:DesignerComponent } ,
    {path: '',redirectTo: '/project-manager',pathMatch: 'full'} 
];

và tôi đang chuyển hướng đến Component thiết kế sử dụng routerLink như sau :

<a [routerLink]="['/designer', page._id]"><i class="fa fa-eye fa-fw"></i></a>

Bây giờ nó đang được chuyển hướng thành công và tôi có thể thấy giá trị tham số trên thanh địa chỉ của trình duyệt.

Bây giờ tôi muốn biết, Làm thế nào tôi có thể truy cập tham số này trong DesignerComponent trong angular2 RC5.

Câu trả lời #1

Tôi tin rằng bạn cần sử dụng ActivatedRoute từ bộ định tuyến để thao tác với tham số của mình.

import { ActivatedRoute } from '@angular/router';

...

constructor(private route: ActivatedRoute, ...) {
}

// TODO :: Add type
value: any;  // -> wanted parameter (use your object type)

ngOnInit() {
    // get URL parameters
    this.route.params.subscribe(params => {
      this.value = params.id; // --> Name must match wanted parameter
    });
}

Đừng quên nhập OnInit từ @angular/core nếu bạn cũng cần nó.

Lưu ý : Bạn cũng có thể sử dụng this.route.snapshot.params để truy cập nó một cách đồng bộ.

ĐÃ CHỈNH SỬA:

• Dọn dẹp để tránh đăng ký vì bộ định tuyến NG2 tự quản lý các đăng ký của nó.
• Tránh sử dụng các biến riêng tư có thể được sử dụng trong HTML để tránh làm hỏng biên dịch AOT.
• Đã dọn dẹp ROUTER_DIRECTIVES vì nó đã bị lỗi thời.
• Tránh sử dụng chuỗi ký tự: params['id'] => params.id
• Gõ tham số của bạn với TypeScript nếu bạn có

Câu trả lời #2

Đầu tiên nhập ActivatedRoute từ @angular/router.

import { ActivatedRoute } from '@angular/router';

truy cập vào constructor như sau :

constructor(private route: ActivatedRoute){            
}

đăng ký thay đổi tham số bên trong ngOnInit như sau:

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