2016-01-18 3 views
2

Я работаю над угловым окном. В моем приложении у меня есть appComponent, который загружает другой компонент и обрабатывает маршрутизацию. Компонент приложения также загружает компонент nav. вот мой app.htmlНевозможно прочитать свойство 'navigate' of null in angular2

<nav></nav> 
<div class="container"> 
    <router-outlet></router-outlet> 
</div> 

вот мой appComponent.ts

import {Component, View, Inject} from 'angular2/core'; 

import {Router, RouteConfig, RouterLink, RouterOutlet, ROUTER_PROVIDERS} from 'angular2/router'; 

import {HomeComponent} from '../home/home'; 
import {LoginComponent} from '../login/login'; 
import {DashboardComponent} from '../dashboard/dashboard'; 
import {ProjectComponent} from '../project/project'; 
import {NewProjectComponent} from '../project/newproject'; 
import {EffortComponent} from '../effort/effort'; 
import {ProfileComponent} from '../profile/profile'; 
import {DemoComponent} from '../demo/demo'; 
import {LeaveComponent} from '../leave/leave'; 
import {NavComponent} from '../nav/nav'; 

import {GlobalDataService} from '../../services/globalDataService'; 


@Component({ 
    selector: 'app', 
}) 
@View({ 
    templateUrl: '/scripts/src/components/app/app.html', 
    directives: [RouterLink, RouterOutlet, NavComponent] 
}) 
export class AppComponent { 
    devIsLogin: boolean; 
    Dev: {}; 
    globalDataService: any 
    constructor(
     @Inject(Router) private router: Router 
    ) { 
     this.globalDataService = GlobalDataService 
     this.globalDataService.devIsLogin = false; 
     router.config([ 
      { path: '', component: HomeComponent, as: 'Home' }, 
      { path: '/login', component: LoginComponent, as: 'Login' }, 
      { path: '/dashboard', component: DashboardComponent, as: 'Dashboard' }, 
      { path: '/project', component: ProjectComponent, as: 'Project' }, 
      { path: '/newproject', component: NewProjectComponent, as: 'NewProject' }, 
      { path: '/effort', component: EffortComponent, as: 'Effort' }, 
      { path: '/profile', component: ProfileComponent, as: 'Profile' }, 
      { path: '/demo', component: DemoComponent, as: 'Demo' }, 
      { path: '/leave', component: LeaveComponent, as: 'Leave' }, 
     ]); 
    } 
} 

вот мой nav.html

вот мой navcomponent.ts

import {Component, View, Inject} from 'angular2/core'; 
import {NgIf} from 'angular2/common'; 
import {Router, RouterLink} from 'angular2/router'; 

import {GlobalDataService} from '../../services/globalDataService'; 

@Component({ 
    selector: 'nav', 
}) 
@View({ 
    templateUrl: '/scripts/src/components/nav/nav.html', 
    directives: [RouterLink, NgIf] 
}) 
export class NavComponent { 
    globalDataService: any 
    constructor(
     @Inject(Router) private router: Router 
    ) { 
     this.globalDataService = GlobalDataService; 
    } 
    logout() { 
     this.router.parent.navigate(['/']); 
    } 
} 

на компоненте nav у меня есть функция выхода, которая перенаправляет пользователя на домашнюю страницу. , но когда я нажимаю на странице выхода из системы он дает

enter image description here

Я не могу понять, почему его ошибку метания.

+0

ли работа с 'this.router.navigate ([ '/']) ; '? –

ответ

3

Метод navigate должен называться на самом Router например:

selectCompany(company:Company) { 
    this.router.navigate([ 'Details', { id: company.id }]); 
    return false; 
} 

Надеется, что это помогает вам, Thierry

+0

но в моем приложении какое-то другое место у меня есть this.router.parent.navigate (['/']); и есть работающий штраф – Rhushikesh

+0

Как я могу использовать категории, в которых – Rhushikesh

+0

Возможно, вы используете подпункты в других частях приложения. Я думаю, что атрибут «parent» позволяет вам ссылаться на родительский маршрутизатор из под маршрутизаторов. –

Смежные вопросы