Angular2 - 在「/」沒有任何其他成分（英雄教程）

負載AppComponent要問我的問題，我會爲例如使用官方angular.io英雄教程。Angular2 - 在「/」沒有任何其他成分（英雄教程）

（這是點6.Routing - Tutorial的結果）。

當你在控制檯上npm start，AppComponent的HTML被加載，但/dashboard也默認加載（當URL是http://localhost:3000它被自動重定向到http://localhost:3000/dashboard）。

我的問題是：當你引入http://localhost:3000，是否可能只加載HTML AppComponent並且不自動重定向到dashboard？

我試圖從刪除app.routing.ts

{ 
    path: '', 
    redirectTo: '/dashboard', 
    pathMatch: 'full' 
},

但後來我得到5這樣的錯誤EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: ''。

正式運動員是：https://angular.io/resources/live-examples/toh-5/ts/plnkr.html。

謝謝！

來源

2016-08-27 Jordi 45454

這只是因爲你的路由器。如果你正確地管理你的應用程序，你可以先加載一個組件，然後選擇你在你的路由器插座中加載的內容。在這裏，您只需創建一個帶有要加載組件的路由，而不是重定向到另一個URL路由。

基本上，對於角度來說，網址在http://localhost:3000/之後開始，然後默認情況下路由路徑是「'，除非您告訴路由器導航到特定的網址。

你需要做這樣的事情：plunkr後

{ path: '', component: DashboardComponent },

編輯：

變化的plunkr這些代碼部分看到你所期望的，我相信。

在app.component.ts

<nav> 
    <a routerLink="/" routerLinkActive="active">Dashboard</a> 
    <a routerLink="/heroes" routerLinkActive="active">Heroes</a> 
</nav>

在app.routing.ts

const appRoutes: Routes = [ 
    { 
    path: '', 
    component: DashboardComponent 
    }, 
    { 
    path: 'detail/:id', 
    component: HeroDetailComponent 
    }, 
    { 
    path: 'heroes', 
    component: HeroesComponent 
    } 
];

正如我在第一次回答說，當您啓動應用程序，你會得到到這個網址：「http://localhost:3000/」。你的第一個組件將被加載，沒有url附加到它，這就是爲什麼路徑是空的。

{ 
    path: '', 
    redirectTo: '/dashboard', 
    pathMatch: 'full' 
},

當你在「/」網址上時，你的第一段代碼告訴路由器在URL「/ dashboard」上重定向。我只是將其更改爲直接加載沒有網址的組件儀表板。

{ 
    path: '', 
    component: DashboardComponent 
},

來源

2016-08-27 21:32:34

對不起，我從angular2開始。我不明白爲什麼放置路徑：''和加載組件：DashboardComponent。我想要的不是加載儀表板，但我知道你的代碼加載它。 –

添加與您的路由器相關的代碼，以便我們可以看到更多的應用程序，以便正確解釋您;）這是很好的dw。 –

我的代碼與你在問題中提到的重擊者所發現的完全一樣。 –

那是因爲路由器出口在AppComponent使用。當你運行你的應用程序時，AppComponent會出現，因爲它有router-outlet，它至少需要一個默認視圖。在你的情況下，它是儀表板。

您試圖將其刪除，因此您刪除了默認設置路線。缺省路由需要存在。如果你刪除它，角路由器會發出錯誤。

router-outlet不能爲空。無論如何你必須提供一個視圖。

所以用AppComponent html視圖，您還將在router-outlet有一些其他視圖。

所以你可以做的是

1）從AppComponent刪除羅特出口。

2）從AppComponent代碼嘗試導航到儀表板路由。在代碼的某處，讓我們說任何按鈕點擊事件例如。 this.router.navigate['/dashboard']

來源

2016-08-27 22:02:11 micronyks

我必須刪除這個：** routerLink =「/ dashboard」**並添加以下內容：** <按鈕（click）=「goToDashboard（）」> **並且在此方法中您提供了我的代碼？無論如何，來自app.routing.ts的** redirectTo **會發生什麼？ –

是的，你必須刪除routerLink部分n使用點擊事件。你不需要默認路由來聲明。 – micronyks

我試着說你說的，但控制檯得到一些錯誤。 http://plnkr.co/edit/LBIKYare1pIH93ZIyZYe?p=info –

Angular2 - 在「/」沒有任何其他成分（英雄教程）

回答

相關問題