2017-02-18 216 views
1

當兒童路線之間導航時,我總是收到路線未找到的錯誤。我已經嘗試了幾種解決方案,我總是注入,並且在孩子配置後我總是刷新。但是我仍然無法導航到特定的路線。兒童路線之間的導航

當我嘗試從create.ts導航到account_view時,它表示路由名稱不存在,當我在create.ts中列出this.router中的所有路由時,它只表示accounts_overview和accounts_create,但不包含子路由accounts_overview。

app.ts

import {inject} from 'aurelia-framework'; 
import {RouterConfiguration, Router} from 'aurelia-router'; 
import {HttpClient} from "aurelia-fetch-client"; 
import {AureliaConfiguration} from "aurelia-configuration"; 
import {Container} from 'aurelia-dependency-injection'; 
import {AuthorizeStep} from 'app/authorize-step'; 

export class App { 
    private router: Router; 

    configureRouter(config: RouterConfiguration, router: Router): void { 
     config.title = 'Optios partners'; 
     config.addAuthorizeStep(AuthorizeStep); 
     config.map([ 
      { route: '', redirect: "login" }, 
      { route: '/accounts', name: 'accounts', moduleId: 'account/view/index', title: 'Accounts', settings: { roles: [ 'partner', 'admin' ] } } 
     ]); 
     this.router = router; 
    } 
} 

帳戶/視圖/ index.ts

import {computedFrom} from 'aurelia-framework'; 
import {RouterConfiguration, Router} from 'aurelia-router'; 

export class Index { 
    router: Router; 
    hasSearchFocus: boolean; 
    search: string = ''; 

    configureRouter(config: RouterConfiguration, router: Router) 
    { 
     config.map([ 
      { route: '/overview', name: 'accounts_overview', moduleId: 'account/view/overview', nav: true }, 
      { route: '/create', name: 'accounts_create', moduleId: 'account/view/create', nav: true } 
     ]); 

     this.router = router; 
     this.router.refreshNavigation(); 
    } 
} 

帳戶/視圖/ overview.ts

import {AccountRepository} from "../repository/account-repository"; 
import {inject, computedFrom} from 'aurelia-framework'; 
import {RouterConfiguration, Router} from 'aurelia-router'; 
import {EventAggregator} from 'aurelia-event-aggregator'; 

@inject(AccountRepository, EventAggregator) 
export class Overview { 
    router: Router; 
    eventAggregator: EventAggregator; 
    accountRepository: AccountRepository; 
    accounts: string[]; 
    previousLetter: string = 'Z'; 

    configureRouter(config: RouterConfiguration, router: Router) 
    { 
     config.map([ 
      { route: ['', '/blank'], name: 'account_blank', moduleId: 'account/view/blank', nav: true }, 
      { route: '/:id', name: 'account_view', moduleId: 'account/view/view', nav: true, href: '0' } 
     ]); 

     this.router = router; 
     this.router.refreshNavigation(); 
    } 
} 

帳戶/視圖/ create.ts

import {inject} from 'aurelia-framework'; 
import {Router} from 'aurelia-router'; 
import {computedFrom} from 'aurelia-framework'; 
import {HttpClient} from 'aurelia-fetch-client'; 
import {AccountRepository} from "../repository/account-repository"; 

@inject(AccountRepository, Router) 
export class Create 
{ 
    router: Router; 
    accountRepository: AccountRepository; 
    name: string; 
    isSubmitted: boolean = false; 

    constructor(accountRepository: AccountRepository, router: Router) 
    { 
     this.accountRepository = accountRepository; 
     this.router   = router; 
    } 

    create() 
    { 
     this.isSubmitted = true; 
     if (this.isValid()) { 
      this.accountRepository 
       .create(this.name) 
       .then(response => { 
        if (! response.ok) { 
         throw Error(response.statusText); 
        } 

        return response.json(); 
       }) 
       .then(response => { 
        console.log(this.router.routes); 
        this.router.navigateToRoute('account_view'); 

        return response; 
       }) 
       .catch(error => { 
        console.error(error); 
       }); 
     } 
    } 
} 
+1

爲什麼在路徑定義中使用引號斜槓?他們應該沒有他們工作很好https://gist.run/?id=11b928907440e90ea6564ec18d4e0f76 –

+0

是的,我不知道它發生了。 我無法解決我的問題,但我確實改變了我的工作方式,放棄了孩子的路線,並將所有內容放在單獨的「自定義」元素中。 這導致我有時重複佈局的小部分。 – tmas

+0

您不應該爲此使用自定義元素,因爲您將失去深度鏈接。 –

回答

4

您不能路由到不同的子路由器具名的路線。我們正在討論如何在未來的Aurelia版本中處理這類問題。

這就是說,我懷疑你永遠無法做到你正在試圖做的事情,你試圖做到這一點。你有一個孩子路由器結構,看起來像這樣:

 APP 
     | 
    ACCOUNTS 
    / \ 
    OVERVIEW CREATE 

您正在嘗試有CREATE路由器路由在OVERVIEW路由器的路由,它沒有的知識。國際海事組織,你有一個過度嵌套的路由器結構。我會將路由器結構展平一些,然後考慮使用EventAggregator來發布父路由器的頁面將訂閱並導致導航事件或事件的事件。