0
我正尝试使用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
你有'<基本href =“/”>'的'
'标签(或'引导()'不知道,但我认为它起到了重要作用在这里? –