ngOnChanges不觸發角2

我有一個子組件作爲pagerService，它給了我們pageBounds每次我給它一個數組的長度我需要分頁。ngOnChanges不觸發角2

這是我如何傳遞數組的長度，以進行分頁從父組件的子組件：

<!--parent --> 
    <ng-container *ngIf="currentView.tasks && currentView.tasks.length"> 
      <span>{{currentView.tasks.length}}</span> <!--for debugging --> 
      <pagination-bar [totalItems]="currentView.tasks.length" (onTotalItemChanged)="setPageBounds($event)" > 

      </pagination-bar> 
     </ng-container> 
<!--/parent>

這是我的子組件：

@Component({ 
selector: 'pagination-bar', 
    template: `<ul *ngIf="pager.pages && pager.pages.length" class="pagination"> 
       <li [ngClass]="{disabled:pager.currentPage === 1}"> 
        <a (click)="setPage(1)">First</a> 
       </li> 
       <li [ngClass]="{disabled:pager.currentPage === 1}"> 
        <a (click)="setPage(pager.currentPage - 1)">Previous</a> 
       </li> 
       <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}"> 
        <a (click)="setPage(page)">{{page}}</a> 
       </li> 
       <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}"> 
        <a (click)="setPage(pager.currentPage + 1)">Next</a> 
       </li> 
       <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}"> 
        <a (click)="setPage(pager.totalPages)">Last</a> 
       </li> 
      </ul> 
`, 
}) 
    export class PagerService implements OnChanges{ 
     @Input() 
     totalItems:number; 
     @Output() 
     onTotalItemChanged = new EventEmitter<any>(); 
     pageBounds : any; 
     pager : Pager; 

     constructor() { 
     } 

     //this is never called 
     ngOnChanges(changes: SimpleChanges): void { 
     this.pager = this.getPager(this.totalItems); 
     this.pageBounds = { 
      startIndex: this.pager.startIndex, 
      endIndex: this.pager.endIndex 
     }; 
     this.onTotalItemChanged.emit(this.pageBounds); 
     } 


     getPager(totalItems: number, currentPage: number = 1, pageSize: number = 10) :Pager { 
     let pager:Pager ; 
     // some logic.. hidden as irrelevant to the question 


     return pager; 
     } 
    }

的currentView被改變在父母又由路線觸發。導航爲：

ngOnInit(): void { 
    this.workbenchBaseUrl = this.propertyService.configData && this.propertyService.configData.workbenchBaseUrl || null; 
    this.route.params 
     .switchMap((params: Params) => { 
     let id = params['id']; 
     if(!id){ 
     this.router.navigate(['/view', this.taskViewService.getDefaultViewId()]) 
     } 
     return this.taskViewService.getView(id); 
    }) 
     .subscribe((view: TaskView) => { 
     this.currentView = view; 
     this.taskViewService.refreshViewContent(this.currentView); 

    }); 

    }

我r EAD類似的問題，包括這一個：Detect changes in objects inside array in Angular2

這讓我想也許ngOnChanges不觸發，因爲它不會改變輸入實例，但我不知道這個假設的，

我讀到ngDoCheck（DoCheck ）但不完全瞭解它，或者即使我需要在我的情況下使用它

來源

2017-08-11 Snedden27

這有點奇怪，你沒有提供@Component，並提供了一個名爲PagerService的類，它提示服務，而不是一個組件。但是這個代碼再次使用只在組件中使用的輸入和輸出。所以如果它真的是一項服務，那麼這種行爲是完全正常的。 – JEY

這是一個組件，我沒有提供它的組件部分，因爲我認爲這可能是無關緊要的，我現在已經添加它 – Snedden27

setPage功能是否也被刪除？我沒有看到該組件上的功能。 –

這可能是愚蠢的，但我應該發佈之前，別人浪費他們像我一樣的時間。我忘了把子組件放在應用程序聲明中

來源

2017-08-11 18:43:12 Snedden27

ngOnChanges不觸發角2

回答

相關問題