使用路由器 links 注入模板组件时出现 Angular2 router-link 问题

Question

Angular2 路由器-link 使用路由器 links

注入模板组件时出现问题

我有一个 app.ts 文件，我想将我的导航组件依赖注入到我的 app.ts 文件中。

我制作了一个具有模板但没有功能的导航组件。该模板将 fine 注入 app.ts。但是，当我将 route-links 添加到模板时，仅使用 router-links 时总是会出现控制台错误。

这是我的导航组件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]);

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

Answer 1

我解决了我自己的问题！在导航 html 组件中丢失，然后我将 router-link 名称错误并将其从 "login" 更改为 "Login" 以在 [=] 中的路由器配置中匹配它16=] 文件.

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

Answer 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 {
}

使用路由器 links 注入模板组件时出现 Angular2 router-link 问题

Angular2 router-link issue when injecting a template component with router links

javascript

typescript

angular2-template

angular