각도 2. 변경 경로에서 '정의되지 않은 unsubsribe'를 읽을 수 없습니다.

Question

내 2 각도 앱에서이 데이터를 여러 하위 구성 요소로 전달하는 데이터 소스에 가입 한 부모 구성 요소가 있습니다. 내 하위 구성 요소 중 하나에서 상위 구성 요소에서 만든 가입에서받은 매개 변수로 앱의 다른 경로로 이동하려고 시도합니다. 이건 내입니다

Error in ./CompanyPromoCardComponent class CompanyPromoCardComponent - inline template:6:10 caused by: Cannot read property 'unsubscribe' of undefined

: 나는 내 응용 프로그램에서이 작업을 수행 할 때마다이 오류가 얻을 CompanyPromoCardComponent

export class CompanyPromoCardComponent implements OnInit { 

    @Input() company:Object; 
    constructor(private router: Router) { } 

    ngOnInit() { 
    } 

    gotoDetail(_id: String) { 
    let link = ['/företag/' + _id + '/företagsinformation']; 
    this.router.navigate(link); 
    } 

} 
<div *ngIf="company"> 
    <div class="panel panel-default"> 
    <div class="panel-body"> 
     <div class="row"> 
     <div class="col-md-4"> 
      <app-company-industry [company]='company' [sub]='sub'></app-company-industry> 
     </div> 
     <div class="col-md-8"> 
      <app-company-targetgroup [company]='company'></app-company-targetgroup> 
     </div> 
     </div> 
     <app-company-description [company]='company'></app-company-description> 
     <app-company-tags [company]='company'></app-company-tags> 
    </div> 
    <div class="panel-footer"> 
     <div> 
     <a class="btn btn-primary" (click)="gotoDetail(company._id)">Info</a> 
     </div> 
    </div> 
    </div> 
</div> 

을 그리고 이것은 내가 내 데이터에 가입 내 부모 구성 요소입니다

export class SearchResultsComponent implements OnInit { 

     companies:Array<Object>; 
     user:Object; 
     sub:any; 
     constructor(
     private companyService:CompanyService, 
     private authService:AuthService, 
     private flashMessage:FlashMessagesService 
    ) { } 

     ngOnInit() { 
     this.sub = this.companyService.getCompaniesSearch().subscribe(data => { 
      console.log('data.companies: ' + data.companies); 
      this.companies = data.companies; 
     }, 
     err => { 
      console.log(err); 
      return false; 
     }); 
     } 

     ngOnDestroy(){ 
     this.sub.unsubsribe(); 
     } 

    } 

기업의 구성 요소 - 하위 구성 요소

import { Component, OnInit, Input, OnDestroy } from '@angular/core'; 

@Component({ 
    selector: 'app-company-industry', 
    templateUrl: './company-industry.component.html', 
    styleUrls: ['./company-industry.component.css'] 
}) 
export class CompanyIndustryComponent implements OnInit { 

    error: any; 
    @Input() sub: any; 
    navigated = false; 
    @Input() company:Object; 
    constructor(
) { } 

    ngOnInit() { 
    console.log(this.sub); 
    } 

    ngOnDestroy(){ 
    this.sub.unsubscribe(); 
    } 

} 

이것은 관측 가능 물질로 작업 한 첫 번째 시간이므로 저와 함께하십시오. 이 오류의 원인은 무엇입니까? 나는 회사 객체에서 반환 된 ID에 의존하는 다른 경로를 탐색하기 만하면된다. 변수가 정의되지 않은 여부를 아래와 같이 작업을 수행하기 전에 경우 항상 좋은 연습

Answer 1

그이, 확인하는

ngOnDestroy(){ 
    if(this.sub){ 
     this.sub.unsubscribe(); 
    } 
    } 

어떻게 이제까지 @input 변수는 속성을 통해 할당되어 있기 때문에 문제입니다. 그래서, 당신이 할 수

this.companyService.getCompaniesSearch() 
    .skipWhile(data => { 
     return _.isEmpty(data); 
     }) 
    .subscribe(data => { 
      console.log('data.companies: ' + data.companies); 
      this.companies = data.companies; 
     }, 
     err => { 
      console.log(err); 
      return false; 
     }).unsubscribe(); 

참고 :

1. 스킵 동안 추가하면 사용자의 데이터를 사용할 수까지 등록 할 수 있습니다.
2. 데이터 구독을 완료하면 위와 같이 탈퇴() 할 수 있습니다.