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

回答

相关问题