带参数的Angular2路由

时间:2017-09-06 17:54:49

标签: angular angular2-routing

我正在尝试根据提交的变量进行路由。当我在我的按钮上单击一次时它可以工作,但是当我下次出现以下错误时点击它:

  ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'component' of null
  TypeError: Cannot read property 'component' of null
    at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.

问题出在哪里?如何解决?这是代码:

gallery.component html:

<nav class="navigation">
    <button 
        class="button" 
        (click)=
        "
            onChangeModelsTeamClick('female');
            onSelect();   
        "
        [ngClass]="{'active': chosenModels=='female'}" 

    >
        MODELKI
    </button><!--
 --><button 
        class="button"
        (click)=
        "
            onChangeModelsTeamClick('male');
            onSelect();
        "
        [ngClass]="{'active': chosenModels=='male'}" 
    >
        MODELE
    </button><!--
 --><button 
        class="button"
        (click)="
            onChangeModelsTeamClick('premium');
            onSelect();  
        "
        [ngClass]="{'active': chosenModels=='premium'}" 
    >
        PREMIUM
    </button>
</nav>

gallery.component.ts

onSelect() {
    this._router.navigate(['/galeria', this.chosenModels]);
}

app routing.module

const routes: Routes = [
    { path: 'galeria', component: GalleryComponent  },
    { path: 'galeria/:id', component: TeamDemonstrationComponent  }
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [
        RouterModule
    ]
})

export class AppRoutingModule {}
export const routingComponents = [GalleryComponent, TeamDemonstrationComponent];

0 个答案:

没有答案