Angular2检测转导的变化

Question

我正在使用新组件来实现Dot导航。

父容器是名为DotNavigationComponent的Component，每个页面都是DotNavigationPage。页面选择器是在DotNavigationComponent中创建的我想更改点击点的页面。我尝试使用翻译来做到这一点。

import {Component,
        EventEmitter,
        ContentChildren,
        OnInit,
        AfterContentInit,
        Optional,
        Host,
        Input,
        QueryList,
        Injectable } from '@angular/core';

@Component({
    selector: 'dot-navigation-page',
    template: `
        <ng-content *ngIf="showing"></ng-content>
    `,
})
export class DotNavigationPage implements AfterContentInit {
    @Input("page") page:number;
    public changePage:EventEmitter<any> = new EventEmitter();


    public showing:boolean = false;
    constructor() {}

    ngAfterContentInit() {
        if(this.page == 0){
            this.showing = true;
        }
        this.changePage.subscribe((index)=>{
            this.showing = false;
            if(this.page == index){
                this.showing = true;
            }
        })
    }
}

@Component({
    selector: 'dot-navigation',
    template: `
        <div class="dot-navigation">
            <ng-content></ng-content>
        </div>
        <div class="dot-navigation-scroll">
            <span (click)="nextPage(page)" *ngFor="let page of numPages">o</span>
        </div>
        `,
    styles: [`
        .dot-navigation-scroll{
            display: flex;
            justify-content: center;
        }
    `]
})
export class DotNavigationComponent implements AfterContentInit {
    public numPages:number[] = [];
    @ContentChildren(DotNavigationPage) pages:QueryList<DotNavigationPage> ;

    constructor(){}

    ngAfterContentInit(){
        for(let i = 0; i < this.pages.length; i++){
            this.numPages.push(i);
        }
        this.pages.forEach(page => {
            page.changePage.subscribe(()=>{console.log("test")})
        })
    }

    nextPage(index:number){
        console.log(index);
        this.pages.forEach(p=>{
            p.changePage.emit(index);
        })
    }
}

@Injectable()
export class DotService{
    changePage:EventEmitter<number> = new EventEmitter<number>();
}

问题是当我更改页面时，PageComponents没有改变。我试图直接修改PageComponents属性。

有什么想法吗？ 谢谢！