매개 변수 변경시 각도 2 새로 고침 경로

Question

현재 첫 번째 각도 2 신청서를 작성 중입니다. 나는 다음과 같은 간단한 템플릿이있는 OverviewComponent 있습니다

<div class="row"> 
    <div class="col-lg-8"> 
    <router-outlet></router-outlet> 
    </div> 
    <div class="col-lg-4"> 
    <app-list></app-list> 
    </div> 
</div> 

다음 라우터 콘센트에서지도를로드 /overview에 / 내 라우터 나를 리디렉션 URL에 액세스. 에는 클릭 가능한 항목 목록이있어 앱 구성 요소 대신 <app-detail>이 표시됩니다. 그러므로 나는 그 URL에있는 추천 json 파일의 ID를 /details/:id (내 경로에 있음)으로 전달합니다.

위의 모든 작업이 정상적으로 작동합니다. 목록 항목 중 하나를 클릭하면 세부 정보가 표시되지만 다른 목록 요소를 선택하면보기가 새로운 세부 정보로 변경되지 않습니다. URL은 변경되지만 내용은 다시로드되지 않습니다. 어떻게 DetailComponent의 재 초기화를 할 수 있습니까?

Answer 1

첫 번째 최종 릴리스에 따라이 문제가 해결되었습니다. 매개 변수가

this.route.params.subscribe(params => { 
    this.param = params['yourParam']; 
    this.initialiseState(); // reset and set based on new parameter this time 
}); 

Answer 2

현재이 기능은 현재 직접 지원되지 않습니다. 또한 https://github.com/angular/angular/issues/9811

당신이 할 수있는 것은 내가 유사한 문제에 대한 답이 있는지 모른다 (테스트하지)

<div *ngIf="doShow" class="row"> 
    <div class="col-lg-8"> 
    <router-outlet></router-outlet> 
    </div> 
    <div class="col-lg-4"> 
    <app-list></app-list> 
    </div> 
</div> 

doShow:boolean: true; 

constructor(private _activatedRoute: ActivatedRoute, private _router:Router, private cdRef:ChangeDetectorRef) { 
    _router.routerState.queryParams.subscribe(
    data => { 
     console.log('queryParams', data['st']); 
     this.doShow = false; 
     this.cdRef.detectChanges(); 
     this.doShow = true; 
    }); 
} 

Answer 3

같은이보기 하나는 바로 여기에 제안 할 것이므로 어쨌든 그것을 할 것입니다 :

나는 다음과 같은 방법으로 '가짜'재 장전을 할 수있었습니다.

내가 사용하고자하는 내가 기본적으로 '진짜'구성 요소에 저를 리디렉션 구성 요소를 만드는 않았다

이

@Component({ 
    selector: 'camps-fake', 
    template: '' 
}) 
export class FakeComponent implements OnInit { 

    constructor(private _router:Router, 
       private _route:ActivatedRoute) 
    { } 

    ngOnInit() { 
    let id:number = -1; 
    this._route.params.forEach((params:Params) => { 
     id = +params['id']; 
    }); 

    let link:any[] = ['/details', id]; 
    this._router.navigate(link); 
    } 

} 

그래서 목록 항목을 선택하여 라우터 그냥 ID를 추출 /fake/:id로 이동합니다 URL에서 '실제'구성 요소로 이동합니다.

나는 더 쉽고 멋진 방법이있을 수 있지만,이 솔루션은 가짜가 실제로 관심을 끌지 않아 꽤 잘 작동한다고 생각합니다. 페이지가 다시로드 될 때 '깜박'은 부정적인 측면이지만 내 CSS 지식이 도달 할 때까지이를 충당하기위한 전환이있을 수 있습니다.

Answer 4

자식 구성 요소가 새 링크를 보내고 이벤트를 내면 이벤트를 사용하여 해결했습니다. 그런 다음 부모는 변경 내용을 찾고 필요한 데이터를 다시로드하는 일부 다시로드 함수를 호출 할 수 있습니다. 또 다른 옵션은 route parameters, and found when it change 에 가입하는 것입니다.하지만 angular2의 사람들은 router.navigate 함수에 매개 변수를 추가하는 것을 고려해야한다고 생각합니다.이 함수는 다시로드 할 수 있습니다. (forceReload = true)

Answer 5

, 내 경우에는 내가 그렇게 내가 해결을 사용하여 정보를로드받은 매개 변수의 변화를 검출 할 수있다 변경할 때

그냥 제대로 된 구성 요소의 상태를 재설정 많은 관심을 지불 매개 변수가 필요하지 않습니다 (변경된 경우에만 감지).이것은 내 마지막 솔루션입니다.

public product: Product; 
private parametersObservable: any; 

constructor(private route: ActivatedRoute) { 
} 

ngOnInit() { 
    this.parametersObservable = this.route.params.subscribe(params => { 
    //"product" is obtained from 'ProductResolver' 
    this.product = this.route.snapshot.data['product']; 
    }); 
} 

//Don't forget to unsubscribe from the Observable 
ngOnDestroy() { 
    if(this.parametersObservable != null) { 
    this.parametersObservable.unsubscribe(); 
    } 
} 

Answer 6

여기에 추가해야 할 또 다른 방법은 모듈에 RouteReuseStrategy을 제공하는 것입니다. 구성은 (이 해당 아이디 PARAM 만 변경시의 경우 임) 동일한 경우

providers: [ 
    { 
    provide: RouteReuseStrategy, 
    useClass: AARouteReuseStrategy 
    } 
] 

라우터의 디폴트의 동작 경로를 재사용하는 것이다. 경로를 다시 사용하지 않도록 전략을 변경하면 구성 요소가 다시로드되며 구성 요소의 경로 변경을 구독하지 않아도됩니다.

export class AARouteReuseStrategy extends RouteReuseStrategy { 
    shouldDetach(route: ActivatedRouteSnapshot): boolean { 
    return false; 
    } 
    store(route: ActivatedRouteSnapshot, handle: {}): void { 

    } 
    shouldAttach(route: ActivatedRouteSnapshot): boolean { 
    return false; 
    } 
    retrieve(route: ActivatedRouteSnapshot): {} { 
    return null; 
} 
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean { 
    return false; // default is true if configuration of current and future route are the same 
} 
} 

내가 너무 여기에 대한 몇 가지를 작성했습니다 :

RouteReuseStrategy의 구현은 다음과 같이 될 수

https://pjsjava.blogspot.no/2018/01/angular-components-not-reloading-on.html