角2ルータが正常に動作しない

Question

アプリケーションが古い角型ルータで正常に動作していましたが、「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) 
]; 

メイン.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 nav.component.htmlで

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

私は、ナビゲーションをトリガするために[router-link] ="['/walley']"を使用しています。

私が使用しているコードの問題または使用しているルータのバージョンに問題があるかどうかについてのフィードバックは非常に高く評価されます。

Answer 1

テンプレートhtmlに[routerLink]を使用する必要があります。あなたは小文字の「R」、大文字の「L」なしハイフン:)また

を使用していることを確認し、それはあなたがあなたのアプリケーションでrouterLinks多くを使用するつもりなら、ルーターのディレクティブをブートストラップするために便利です