Angular2 구성 요소가 라우팅 매개 변수 업데이트 (라우터 3.0)를 감지하지 못합니다.

Question

현재 앵귤러 2에서 사용할 수있는 새로운 라우터 3.0 알파를 가지고 놀기 위해 사용하고있는 작은 플 런크가 있습니다. 일반적으로 잘 작동하지만 문제는 특정 ID로 '세부 정보'구성 요소로 연결되는 링크를 클릭하면 다른 ID로 다른 링크를 클릭해도 변경되지 않는다는 것입니다. 구성 요소는 절대 다시 인스턴스화되지 않으므로 처음로드 될 때 전달 된 내용 만 표시됩니다.

import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 
import { ContactsService } from './contacts.service'; 

@Component({ 
    selector: 'contacts-detail', 
    template: ` 
    <h2>{{contact.name}}</h2> 
    ` 
}) 
export class ContactsDetailComponent implements OnInit { 

    constructor(private contactsService: ContactsService, private route: ActivatedRoute) { 
    } 

    ngOnInit() { 
    this.contact = this.contactsService.getContact(this.route.snapshot.params.id); 
    console.log('Fetching user', this.route.snapshot.params.id); 
    } 
} 

Here is the Plunk 문제를 시연 :

여기에 문제의 구성 요소입니다. 한 저자 이름을 클릭하고 다른 저자 이름을 클릭하면 변경되지 않습니다. 당신의 ContactsDetailComponent에서

Answer 1

이에 OnInit을 변경

ngOnInit() { 
    this.sub = this.route.params.subscribe(params => { 
    let id = +params['id']; 
    this.contact = this.contactsService.getContact(id); 
    }); 
    } 

이 쿵하는 소리에 나를 위해 일했다.

Answer 2

여기에 사용할 수있는 여러 개의 lifeCycle 후크가있는 것으로 보입니다. 나는 아래에서 볼 수 있듯이 DoCheck 인터페이스를 사용하고 구성 요소 클래스에서 ngDoCheck() 메서드를 구현하여 원하는 동작을 얻을 수있었습니다.

import { Component, DoCheck } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 
import { ContactsService } from './contacts.service'; 

@Component({ 
    selector: 'contacts-detail', 
    template: ` 
    <h2>{{contact.name}}</h2> 
    ` 
}) 
export class ContactsDetailComponent implements AfterViewChecked, DoCheck { 

    constructor(private contactsService: ContactsService, private route: ActivatedRoute) { 
    } 

    ngDoCheck() { 
    this.contact = this.contactsService.getContact(this.route.snapshot.params.id); 
    } 
} 

Here's a plunk 업데이트 된 코드.

나는 이것을 사용하는 것이 가장 좋고/올바른 라이프 사이클 고리라고 확신하지는 않습니다. 아마도 Router에서 사용할 수있는 몇 가지 종류의 고리가 있습니다.

Answer 3

또 다른 방법은이 작업을 수행합니다 :

ngOnInit() { 
    this.route.params.forEach((params: Params) => { 
     let id = +params['id']; 
     this.contact = this.contactsService.getContact(id); 
    }); 
} 

는 여기에 관찰 가능한에서 경로 PARAMS를 검색 할 수 있습니다. Observable over Snapshot을 사용하면 구성 요소를 다시 인스턴스화하지 않고 재사용 할 수 있다는 장점이 있습니다. 이것은 Angular 2.0 최종 문서에 따라 권장되는 방법입니다.