首页 文章

注入带有路由器链接的模板组件时出现Angular2 router-link问题

提问于
浏览 次
2

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

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

我制作了一个导航组件，它有一个模板，没有任何功能 . 模板注入app.ts.但是，当我将路径链接添加到模板时，我总是在使用路由器链接时遇到控制台错误 .

Here is my navigation component ts file:

import {Component, View, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';

 @Component({
   selector: 'HeaderNavigation'
 })

 @View({
   templateUrl: '/src/app/components/header/header.html'
 })

 export class HeaderNavigation{

 }

Here is my navigation component html file:

<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>

This is my app.ts file: This file injects the navigation component above:

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]);

This is the error message I get from my console:

enter image description here

javascript angular typescript angular2-template

2 回答

  • 0

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

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

    回复于
  • 1

    对于那些使用角度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 {
}
    回复于

相关问题