導航菜單中的路由器鏈接路徑與angularJS2

我正嘗試使用angularJS2創建導航菜單。這是我在app.component.ts：導航菜單中的路由器鏈接路徑與angularJS2

import {provide, Component} from 'angular2/core'; 
    import {APP_BASE_HREF, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, HashLocationStrategy, LocationStrategy, RouteConfig} from 'angular2/router'; 
    import {bootstrap} from 'angular2/platform/browser'; 
    import {Router} from 'angular2/router'; 


// Terrestri 
@Component({ 
    selector: 'terrestri', 
    template: '/terrestri.html', // WORKS 
}) 
export class TerrestriComponent { } 


// Volatili Component 
@Component({ 
    selector: 'volatili', 
    templateUrl: '/volatili.html' --> DOESN'T WORK 
}) 
export class VolatiliComponent { } 


// Pesci Us Component 
@Component({ 
    selector: 'pesci', 
    template: 'pesci.html' // WORKS 
}) 
export class PesciComponent { } 

@Component({ 
    selector: 'my-app', 
    directives: [ROUTER_DIRECTIVES], 

    template: `  
    <nav> 
     <ul> 
       <li><a [routerLink]="['/Volatili']">VOLATILI</a></li> 
       <li><a [routerLink]="['/Pesci']">PESCI</a></li> 
       <li><a [routerLink]="['/Terrestri']">TERRESTRI</a></li> 
     </ul> 
    </nav> 
    <router-outlet></router-outlet> 
    `, 
}) 

@RouteConfig([ 
    { path: '/volatili', component: VolatiliComponent, as: 'Volatili' }, 
    { path: '/pesci', component: PesciComponent, as: 'Pesci' }, 
    { path: '/terrestri', component: TerrestriComponent, as: 'Terrestri' } 
]) 

export class AppComponent {}

我的文件結構是：

-DEV 
    - app.component.ts 
    - boot.ts 
    - terrestri.html 
    - volatili.html 
    - pesci.html

我無法導航到「volatili」，這在「templateURL」的定義，而我可以去「佩西「和」terrestri「（它們在」模板「而不是」templateURL「中定義）。

我也試過用：

templateUrl: './volatili.html' --> DOESN'T WORK 
templateUrl: 'volatili.html' --> DOESN'T WORK

來源

2016-02-07 splunk

你有'<基本href =「/」>'的''標籤（或'引導（）'不知道，但我認爲它起到了重要作用在這裏？ –

幾件事情：

template: '/terrestri.html', // WORKS, HOW?

模板是爲內嵌HTML這樣的：

template: `<div></div>`

也許你越來越像輸出：/terrestri.html

您的應用所在的位置？如果你把它放在應用程序目錄（例如），那麼你templateUrl應該是：

templateUrl: '/app/volatili.html'

是DEV，在您的示例中，父（上）目錄？試着用：

templateUrl: '/DEV/volatili.html'

來源

2016-02-07 10:07:58

導航菜單中的路由器鏈接路徑與angularJS2

回答

相關問題