卡在angular2（RC1）路由

我是Angular的新手，從Angular 2開始。我創建了一個骨架應用程序（藉助npm）。我的應用程序有兩個組成部分：卡在angular2（RC1）路由

app.component.ts

import { Component } from '@angular/core'; 
import {Routes, ROUTER_DIRECTIVES} from '@angular/router'; 
import { InviteComponent } from './howdy.component'; 

@Component({ 
    selector: 'my-app', 
    template: '<h1>My First Angular 2 App</h1>' 
}) 

@Routes([ 
    { path: '/',   component: AppComponent }, 
    { path: '/howdy', component: HowdyComponent }, 

]) 

export class AppComponent{}

howdy.component.ts

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

@Component({ 
    selector: 'my-app', 
    template: '<h1>Howdy</h1>' 

}) 


export class HowdyComponent{}

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import {ROUTER_PROVIDERS} from '@angular/router'; 
import { AppComponent } from './app.component'; 


bootstrap(AppComponent, [ 
    ROUTER_PROVIDERS 
]);

我想從簡單的路由開始。我想要「\」路線加載app.component，並且「\ howdy」路線加載howdy.component。

現在app.component加載無論使用什麼路線。

我在做什麼錯？

來源

2016-05-12 JasonGenX

我看不到你在任何地方配置角度組件路由器。請參考[這個答案]（http://stackoverflow.com/a/36459121/2435473）設置與angular2路由器 –

你可能會遇到https：// github.com/angular/angular/issues/8409。嘗試在根組件中添加一個routerLink。 –

首先，你必須有<router-outlet>地方，以紀念的地方呈現在成分含量，否則，你是不是把他們的任何地方。請記住，這是一個不像靜態頁面的單頁應用程序。與靜態頁面不同，SPA有一個起點。在你的情況下，它是main.ts總是引導到AppComponent。

其次，AppComponent是負責路由的組件，所以您不能路由回它。你將有循環。因此，您需要爲主要路線/設置另一個組件。

任何方式，這裏是你的代碼修改，使其工作，check this plunk：

import { Component } from '@angular/core'; 
import {Routes, ROUTER_DIRECTIVES} from '@angular/router'; 
import { HowdyComponent } from './howdy.component'; 

@Component({ 
    selector: 'main-route', 
    template: '<h1>My First Angular 2 App</h1>' 
}) 
export class MainComponent{} 


@Component({ 
    selector: 'my-app', 
    directives:[ROUTER_DIRECTIVES], 
    template: ` 
     <a [routerLink]="['/howdy']">Howdy</a> 
     <a [routerLink]="['/']">Main</a> 

     <router-outlet></router-outlet> 
    ` 
}) 
@Routes([ 
    { path: '/',   component: MainComponent }, 
    { path: '/howdy', component: HowdyComponent } 
]) 
export class AppComponent{}

另外，check this plunk，你可以刪除路線/並保持一個/howdy

@Component({ 
    selector: 'my-app', 
    directives:[ROUTER_DIRECTIVES], 
    template: ` 
     <a [routerLink]="['/howdy']">Howdy</a> 
     <a [routerLink]="['/']">Main</a> 

     <h1>This line will be visible everywhere .. </h1> 
     <router-outlet></router-outlet> 
    ` 
}) 
@Routes([ 
    { path: '/howdy', component: HowdyComponent } 
]) 
export class AppComponent{}

此外，無論您選擇哪種方式，請不要忘記在index.html中添加<base href="./">

來源

2016-05-13 02:34:56 Abdulrahman

Shoukran爲您提供幫助！ – JasonGenX

@ RM1970很高興我可以 – Abdulrahman

我剛剛注意到'shoukran'。感謝@ RM1970，這意味着很多 – Abdulrahman

您需要添加

import {ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router'; 
//... 
bootstrap(AppComponent, [ROUTER_PROVIDERS]);

在main.ts文件

來源

2016-05-12 16:01:07 shershen

這是針對測試版的問題，顯然是rc.x.它應該是'@ angular/router';'import {ROUTER_PROVIDERS};'@ angular/common'導入{APP_BASE_HREF};' –

不幸的是，這沒有什麼區別 – JasonGenX

缺少路由器出口，可能是原因。 AppComponent始終是第一次加載，/invite將在路由器出口釀

來源

2016-05-12 21:56:06 Siraj

卡在angular2（RC1）路由

回答

相關問題