Angular2 [routerLink] construction fail

Question

저는 작은 블로그를 작성하여 angular2를 배우고 있습니다. angularci를 typescript 2와 함께 사용합니다.

작은 구성 요소에 문제가 있습니다. 기사 페이지에있을 때 "이전"및 "다음"링크를 통해 다른 기사에 액세스하고 싶습니다. ( 아래 내 문제와) 내 코드 지금까지 : 내 수업 구성 요소 내에서 슬러그

: 기사/: ID/

내 경로는 다음과 같이 만들어

getUrlParams() { 
    this.activatedRoute.params.subscribe((param) => { 
     this.loadPrevArticle(param); 
    }) 
    } 

    loadPrevArticle(param){ 
     let id = Number(param['id']); // Converts the original string to number 

     return this.myService.getArticles().subscribe((data) => { 
     // some stuffs to get the article object I want, actually working :) 
     }); 
    } 

내 서비스는 다음과 같습니다 : 내 D를 가지고

getArticles() { 
    return this.http.get('my_api_link').map(
     (res: Response) => res.json() 
    ); 
} 

ATAS, 서비스는 ... 제대로 작동되지만

내 문제 :

내 this.getUrlParams()는 ngOnInit()에서 메소드를 호출합니다 [routerLink] 내 템플릿에 오류가 표시됩니다. 개체를 찾을 수 없습니다.

[routerLink]="['/article', nextArticle.id, nextArticle.slug] 

하지만 내 메서드를 클래스 생성자로 옮기면 작동합니다. 나는 이것이 좋은 연습이 아니라는 것을 안다. 나는 ngOnInit()에서 모든 것을 옮기고 싶다.

어떻게하면 좋을까?

*ngIf="nextArticle" [routerLink]="['/article', nextArticle.id, nextArticle.slug]" 

그것은 렌더링하기 전에 데이터를 기다립니다 :) 감사 군터

:

html 요소에 추가 : 나는

솔루션

이 ... 지금 손실 조금 있어요

Answer 1

을 추가하면 routerLink이 생성되기 전에 nextArticle을 사용할 수 있습니다.

답에 대한

*ngIf="nextArticle" [routerLink]="['/article', nextArticle.id, nextArticle.slug]" 

또는

는

[routerLink]="nextArticle ? ['/article', nextArticle.id, nextArticle.slug] : null"