Question

该应用程序与旧的Angular 2路由器工作正常，但是当我切换到“3.0.0-beta.2”时，应用程序无法加载。这显然只是应用程序的一部分，但我相信这就是问题所在：

文件：

app.component.ts

import { Component} from '@angular/core';
import {NavComponent} from "./nav.component";
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    selector: 'my-app',
    template: `<my-nav></my-nav>
    <router-outlet></router-outlet>`,
    directives:[NavComponent,ROUTER_DIRECTIVES]
})

export class AppComponent{
}

app.routes.ts

import {AboutComponent} from "./about.component";
import {TasksComponent} from "./tasks.component";
import {WalleyComponent} from "./walley.component";
import {DashboardComponent} from "./dash-board.component";
import {PageNotFoundComponent} from "./404.component";
import { provideRouter, RouterConfig }  from '@angular/router';

export const routes: RouterConfig = [
  {path: '', component: DashboardComponent},
  {path: 'yourTasks', component: TasksComponent},
  {path: 'about',component: AboutComponent},
  {path: 'walley',component: WalleyComponent},
  {path: '**', component: PageNotFoundComponent}
  ];
export const appRouterProviders = [
  provideRouter(routes)
];

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import  {AppComponent} from './app.component';
import {TodoStore} from './todoStore.service';
import { appRouterProviders } from './app.routes';


bootstrap(AppComponent,[appRouterProviders,TodoStore]).catch(err => console.error(err));

nav.component.ts

import { Component} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router';

@Component({
    selector:'my-nav',
    templateUrl: 'components/nav.component.html',
    directives:[ROUTER_DIRECTIVES]
})

export class NavComponent{
    num: Number;
}

在nav.component.html中我使用[router-link] ="['/walley']"来触发导航。

有关代码问题或我正在使用的路由器版本的任何反馈都将不胜感激。

Answer 1

您需要在模板html中使用[routerLink]。确保你使用小写＆＃39; r＆＃39;，大写＆＃39; L＆＃39;没有连字符:)）

此外，如果您要在应用程序中大量使用routerLinks，那么引导您的路由器指令非常方便

Angular 2路由器无法正常工作

1 个答案: