경로 변경시 전체 콘텐츠 다시로드 중지

Question

다음과 같은 경로가 있습니다 : page/:id, 여기에는 id에 대해 다른 콘텐츠가로드됩니다. 그러나 다른 페이지로 갈 때마다 전체 콘텐츠가 다시로드됩니다. API에서 오는 데이터 만 다시로드하고 싶습니다.

탐색 :

는

<ul> 
<li [routerLink]="['/page', 1]">Page 1</li> 
<li [routerLink]="['/page', 2]">Page 2</li> 
<li [routerLink]="['/page', 3]">Page 3</li> 
</ul> 

템플릿 : 는 <h1 *ngIf="data">{{data.name}}</h1>

구성 요소 :이 Plunker에 가면

export class DataComponent implements OnInit { 

    data: any; 
    error: any; 

    constructor(
    private route: ActivatedRoute, 
    private service: DataService 
) {} 

    ngOnInit() { 
    this.getData(); 
    } 

    getData() { 
    this.service.getData() 
     .subscribe(
     res => this.data = res, 
     error => this.error = error 
    ); 
    } 

} 

, 당신은 검은 색 사각형을 볼 때마다 깜박 경로 변경 . 이상적으로 검은 부분은 그대로 유지되며 내부의 데이터 만 변경됩니다.

이 깜박임 동작은 HTTP 호출을 사용하는 경우에만 발생합니다. 그 구성 요소에 다른 것들이 있다면 라우트를 변경할 때 이런 일은 일어나지 않을 것입니다.

해결 방법에 대한 아이디어가 있으십니까?

EDIT : Here's a Plunkr 예상대로 동작합니다. 그러나 나는 이전의 ROUTER_DIRECTIVES을 사용하고 있었는데, 지금은 더 이상 사용되지 않습니다.

Answer 1

@ Rob의 답변을 확장하면 Resolve 가드를 사용하여이 문제를 해결할 수있었습니다.그러나 구현시 몇 가지 실수를 저지르고있었습니다. 내가 경로 초기화하기 전에 HTTP 전화를 해결할 경우

나는 새로운 data-resolve 만들었습니다

providers: [DataService, DataResolve]

: 다음

@Injectable() 
export class DataResolve implements Resolve { 

    constructor(private service: DataService, private router: Router) {} 

    resolve(route: ActivatedRouteSnapshot): 
    Observable<any> | Promise<any> | any { 
     return this.service.getData().then(data => { 
     if (data) { 
      return data; 
     } else { 
      this.router.navigate(['/page/1']); 
     return false; 
     } 
    }); 
    } 
} 

을 내 모듈의 공급 업체에이 서비스를 추가하는 데 필요한

또한 경로를로드하기 전에 라우팅을 알려주십시오.

resolve: { pages: DataResolve }

그 후, 나는 데이터를 얻을 내 구성 요소에서 사용할 수있는 배열을해야합니다 :

this.route.data.forEach((data: {pages}) => { 
    this.data = data.pages; 
}); 

나는 또한 업데이트 한 내 작업 예제와 Plunker.

Answer 2

이미 API에서 제공되는 콘텐츠 만 다시로드하고 있습니다. h1의 스타일을 지정하고 h1이 변경되어 블랙 박스가 깜박입니다. 모든 페이지에 해당 상자가 있으면 AppComponent 템플릿으로 이동하십시오.

<div class="box"> 
    <router-outlet></router-outlet> 
</div> 

그런 다음 h1보다는 .box 셀렉터에 스타일을 이동합니다.

또 다른 문제는 콘텐츠가 제거되고 새로 고쳐지는 동안 상자의 높이가 축소되어 확장된다는 것입니다. 경로에서 해결사를 사용하여 문제를 해결할 수 있습니다. 당신이 탐색 할 때, DataComponent가 파괴되고 내장 다시 때문에

https://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard

Answer 3

귀하의 깜박임이 발생하지만 *ngIf="data"와의 표시를 차단하기 때문에 새로운 서버에서 데이터가 도착할 때까지 표시 할 수 없습니다. On this plunker, 문제를 분명하게하기 위해 서버 응답에 1 초 지연을 추가했습니다. DataComponent 만 깜박입니다. PagesComponent의 나머지 부분은 그렇지 않습니다.

On this plunker 데이터가 하드 코딩되었으므로 눈에 띄는 깜박임이 없으므로 서버의 응답을 기다리지 않아도됩니다.

깜빡임을 줄이려면 *ngIf을 사용하지 마십시오. dom에서 요소를 완전히 제거하기 때문입니다. On this plunker, 데이터가 서버에서 도착하기를 기다리는 동안에도 깜박임이 발생하지 않습니다.

기본적으로 데이터가 도착할 때까지 요소를 숨기기 만하면 구성 요소가 다시 초기화 될 때마다 깜박 거립니다.