Angular 4+：RouterLink in <a>元件無法正常工作

我已將AppRoutingModule放入類的@NgModule的imports之內。Angular 4+：RouterLink in <a>元件無法正常工作

AppRoutingModule以這樣的方式定義：

const APP_ROUTES : Routes = [ 
    { 
     path: '', 
     redirectTo: 'home', 
     pathMatch: 'full', 
    }, 
    { 
     path: 'home', 
     component: HomeComponent 
    }, 
    { 
     path: 'lesson-offers', 
     component: LessonOffersComponent 
    }, 

    { path: '**', redirectTo: 'home' } 
]

我已經把<router-outlet></router-outlet>在app.component.html。

的網頁上展示的基礎上正確的網址：

localhost:5000/ 
localhost:5000/home 
localhost:5000/lesson-offers

的問題是在我的header.component.ts這裏我想routerLink添加到主頁。我曾嘗試這樣的解決方案：

<img routerLink="home" ... /> 
<img [routerLink]="/home" ... /> 
<a routerLink="home"> <img ... /></a> 
<a [routerLink]="home" ... ><img ... /></a>

首先，當我把routerLink在<img>元素，例如指令還沒有被發現。然後在<a>元素中，它使routerLink中的<a href="/home">變得隨意，並使整個頁面重新加載！它不應該只重新加載<router-outlet>的內容？

也許它具有一定的意義，我的佈局是這樣的：

// AppComponent HTML 
<header-bar></header-bar> 
<router-outlet></router-outlet>

和routerLink放置元素在兒童成分<header-bar>（標誌），並應定位於<router-outlet>其父？

但我也測試了使用routerLink s此行爲置於裏面直接AppComonent並沒有發生任何改變！ RouterLink仍然重新加載網頁!:

<header-bar></header-bar> 
<a routerLink="home">Home</a> 
<a routerLink="lesson-offers">Lesson Offers</a> 
<a routerLink="page-not-found">Not Exsists</a> 
<router-outlet></router-outlet>

來源

2017-05-06 Michał Ziobro

你有沒有將RouterModule導入到包含header.component的模塊中？ – giaco

您是否閱讀過[路由教程]（https://angular.io/docs/ts/latest/tutorial/toh-pt5.html）？ – jonrsharpe

嘗試像這樣 –

你需要更多的進行佈線的工作。這裏是你的AppRoutingModule文件應該怎麼看起來像

import { RouterModule, Routes } from '@angular/router'; 
import { NgModule } from '@angular/core'; 
import { HomeComponent, LessonOffersComponent } from somewhere; 

const APP_ROUTES : Routes = [ 
    { 
     path: '', 
     redirectTo: 'home', 
     pathMatch: 'full', 
    }, 
    { 
     path: 'home', 
     component: HomeComponent 
    }, 
    { 
     path: 'lesson-offers', 
     component: LessonOffersComponent 
    }, 

    { path: '**', redirectTo: 'home' } 
] 

@NgModule({ 
    imports: [ RouterModule.forRoot(APP_ROUTES) ], 
    exports: [ RouterModule ] 
}) 
export class AppRoutingModule {}

來源

2017-05-06 10:23:38 Dummy

我有這樣的代碼縮短它，不包括類定義。路由工作，即 –

當我輸入：localhost：5000/lesson-offers它重定向正確。但使用routerLink =「」的鏈接似乎會使整個頁面重新加載。 –

我認爲這個頁面是完全重新加載的，因爲web瀏覽器重新加載指示器正在激活並更改爲「X」按鈕 –

好，我居然發現錯誤，它在，我永遠會想的地方。還有其他不同的行爲，如不工作（點擊）事件綁定。所以，我走在我的網絡項目，該項目已在此樣品角4個通用溫泉基地從GitHub的配置： https://github.com/MarkPieszak/aspnetcore-angular2-universal

我已經從使用自耕農工具生成ASP NET核心SPA做出升級。

npm install -g yo generator-aspnetcore-spa

然後，cd到你希望你的項目去一個空目錄，並然後運行約曼如下：
yo aspnetcore-spa 

然後我注意到，在使用服務器端預渲染時，不可能輕鬆地使用Leaflet Open Street Maps。

因此，從Angular 2+ - > Angular 4+進行升級，購買修改每個文件配置，模塊，引導，webpack，tsconfig等文件。我真的是在這個啓動項目的大印象github上：
https://github.com/MarkPieszak/aspnetcore-angular2-universal

當時我注意到，我仍然有些舊代碼，我想這一天的結束將正常運行：

// boot.client.ts 
platform.destroy(); 
    }); 
} else { 
    enableProdMode(); 
} 

// Boot the application, either now or when the DOM content is loaded 
const platform = platformUniversalDynamic(); 
const bootApplication =() => { platform.bootstrapModule(AppModule); }; 
if (document.readyState === 'complete') { 
    bootApplication(); 
} else { 
    document.addEventListener('DOMContentLoaded', bootApplication); 
}

和正確的一個角中的普遍項目的新版本，類似於應該是：

modulePromise.then(appModule => appModule.destroy()); 
    }); 
} else { 
    enableProdMode(); 
} 

const modulePromise = 
platformBrowserDynamic().bootstrapModule(BrowserAppModule);

PS。以前我也做過替換platformUniversalDynamic => platformBrowserDynamic.

來源

2017-05-06 21:56:00

Angular 4+：RouterLink in <a>元件無法正常工作

回答

相關問題