使用路由器链接注入模板组件时的Angular2路由器链接问题
我有一个 app.ts 文件,我想将导航组件依赖注入到我的 app.ts 文件中。
我制作了一个有模板但没有功能的导航组件。该模板可以很好地注入 app.ts。但是,当我将路由链接添加到模板时,我总是在仅使用路由器链接时遇到控制台错误。
这是我的导航组件 ts 文件:
import {Component, View, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
@Component({
selector: 'HeaderNavigation'
})
@View({
templateUrl: '/src/app/components/header/header.html'
})
export class HeaderNavigation{
}
这是我的导航组件 html 文件:
<header>
<nav class="navbar navbar-default">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a [router-link]="['./Login']">Log In</a></li>
</ul>
</nav>
<router-outlet></router-outlet>
</header>
这是我的 app.ts 文件:这个文件注入了上面的导航组件:
import {Component, View, bootstrap, bind, provide} from 'angular2/angular2';
import {Router, ROUTER_BINDINGS, RouterOutlet, RouteConfig, RouterLink, ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router';
import {Injectable} from 'angular2/angular2';
import {HTTP_PROVIDERS, Http, Headers} from 'angular2/http';
import {Login} from './components/login/login';
import {HeaderNavigation} from './components/header/header';
@Component({
selector: 'app'
})
@View({
template: `
<HeaderNavigation></HeaderNavigation>
<div class="content">
<router-outlet></router-outlet>
</div>
`,
directives: [RouterOutlet, RouterLink]
})
@RouteConfig([
{ path: '/', redirectTo: '/login' },
{ path: '/login', component: Login, as: 'Login' }
])
@Injectable()
export class AppComponent {
constructor(){}
}
bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue: '/'}), HTTP_PROVIDERS]);
这是我从控制台收到的错误消息: