使用路由器链接注入模板组件时的Angular2路由器链接问题答案

【问题标题】：Angular2 router-link issue when injecting a template component with router links使用路由器链接注入模板组件时的Angular2路由器链接问题
【发布时间】：2015-12-13 14:32:00
【问题描述】：

使用路由器链接注入模板组件时出现 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]);

这是我从控制台收到的错误消息：

【问题讨论】：

标签： javascript angular typescript angular2-template

【解决方案1】：

我解决了我自己的问题！导航 html 组件中丢失了，然后我的路由器链接名称错误，并将其从“登录”更改为“登录”，以在 app.ts 文件中的路由器配置中匹配它。

我已在上面的代码中为任何需要的人进行了这些更改。

【讨论】：

【解决方案2】：

对于那些使用 angular 2 rc4 的人，这是我正在使用的： header.component.ts

import { Component }    from '@angular/core';
import { ROUTER_DIRECTIVES }    from '@angular/router';
@Component({
   moduleId: module.id,
   selector: 'ui-header',
   templateUrl: 'header.component.html',
   styleUrls: ['header.component.css'],
   directives: [ROUTER_DIRECTIVES],
})

export class HeaderComponent{
}

在其他组件中添加标题：other.component.ts

import { Component }            from '@angular/core';
import { Router }               from '@angular/router';
import { ROUTER_DIRECTIVES }    from '@angular/router';
import { HeaderComponent }      from'../shared/header/header.component';

@Component({
    selector: 'ui-other',
    template: `
    <ui-header></ui-header>
    <div class = "container">
        <router-outlet></router-outlet>
    </div>
   `,
   directives: [ROUTER_DIRECTIVES, HeaderComponent]
})

export class OtherComponent {
}

【讨论】：