Angular 2路線在瀏覽器瀏覽器時無法正常工作

我對Angular項目的路線有些問題，主要是第三級子路線。這些路線在應用程序導航時正在工作。（routerLink），並通過瀏覽器URL訪問URL時出現問題。Angular 2路線在瀏覽器瀏覽器時無法正常工作

我的角度版本是2.4.0
我在dev服務器上測試ng serve。

與給定結構的項目，

. 
├── photos 
├── posts 
├── users 
│ ├── detail 
│ │ ├── address 
│ │ ├── family 
│ │ ├── information 
│ │ └── phones 
│ ├── friends 
│ └── profile 
└── videos

以下是代碼，

// user routes 
export const userRoutes : Routes = [ 
    { 
    path: 'detail', 
    component: DetailComponent 
    }, 
    { 
    path: 'friends', 
    component: FriendsComponent 
    }, 
    { 
    path: 'profile', 
    component: ProfileComponent 
    } 
] 

//app routes 
const appRoutes: Routes = [ 
    { 
    path: '', 
    component: HomeComponent 
    }, 
    { 
    path: 'photos', 
    component: PhotosComponent 
    }, 
    { 
    path: 'posts', 
    component: PostsComponent 
    }, 
    { 
    path: 'users', 
    component: UserListComponent 
    }, 
    { 
    path: 'user/:username', 
    component: UserComponent, 
    children: userRoutes 
    }, 
    { 
    path: 'videos', 
    component: VideosComponent 
    } 
] 
export const AppRoutes = RouterModule.forRoot(appRoutes); 
export const appRoutingProviders: any[] = [];

，並註冊爲，

@NgModule({ 
    declarations: [ 
    // declarations 
    ], 
    imports: [ 
    AppRoutes 
    ], 
    providers: [ 
    appRoutingProviders 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

所以應用效果很好用RouterLink

[routerLink]="['/user', username, 'detail']

，但是，當我瀏覽瀏覽器<host>/user/myuser/detail它引發異常

Uncaught (in promise): Error: Cannot find primary outlet to load 'DetailComponent'

的哪些錯誤？謝謝。

注意：我已經設置了<router-outlet>，並且在routerLink上運行完美，並且在瀏覽器中瀏覽完整網址時出現問題。

來源

2017-03-15 Marty

你'中添加的'<路由器出口>根分量模板？如果沒有將它放入你的'AppComponent'模板中，HTML將加載 –

我在應用程序組件上有多個'router-outlet'，一個在用戶組件上，另一個在詳細組件 – Marty

我假設當你從user/:username/導航到/user/:username/detail您需要UserComponent隱藏的一切，是對他的模板，並顯示DetailComponent

所以要做到這一點，你需要的組件，可以加載其子組件：

parent.component.html

<router-outlet></router-outlet>

路線。TS

現在讓我們來設置路由，使user/:username/將在父組件

// user routes 
export const userRoutes : Routes = [ 
{ 
    path: '', 
    component: UserComponent // the '' path will load UserComponent 
    }, 
    { 
    path: 'detail', 
    component: DetailComponent 
    }, 
    { 
    path: 'friends', 
    component: FriendsComponent 
    }, 
    { 
    path: 'profile', 
    component: ProfileComponent 
    } 
] 

//app routes 
const appRoutes: Routes = [ 
    { 
    path: '', 
    component: HomeComponent 
    }, 
    { 
    path: 'photos', 
    component: PhotosComponent 
    }, 
    { 
    path: 'posts', 
    component: PostsComponent 
    }, 
    { 
    path: 'users', 
    component: UserListComponent 
    }, 
    { 
    path: 'user/:username', 
    component: ParentComponent, //This component will load its children 
    children: userRoutes 
    }, 
    { 
    path: 'videos', 
    component: VideosComponent 
    } 
] 
export const AppRoutes = RouterModule.forRoot(appRoutes); 
export const appRoutingProviders: any[] = [];

所以加載，這裏發生了什麼是，當你瀏覽到user/:usernameParentComponent加載然後UserComponent在父組件的出口裝（因爲''路徑對應user/:username）

這裏是一個工作示例：Github

當您訪問user/myuser時，它將顯示：user works！ user/myuser/details將顯示：細節的作品！你可以看到下面（如果不使用routerlink）

來源

2017-03-17 13:48:10 YounesM

-3

使用此代碼的HTML routerLink =「/ user」和請註明您的路徑routing.ts和當u點擊這個routerlink將跳轉到有關鏈接

來源

2017-03-15 12:31:22

上，主文件使用下面的代碼以及 –

它與routerLink配合良好，問題出在瀏覽器URL上。 **這與routerLink無關** – Marty

你有沒有設置<base href="/">?

什麼你的後端？如果用戶第一次導航到應用程序子頁面的完整URL（例如www.mysite.com/users/john-doe），並且後端未返回角度2引導頁面（index.html與引導腳本），那麼角度路由器將永遠不會踢，雖然我認爲這不是你的情況的問題，因爲你從角度得到一個錯誤。

我有我的.net核心後端設置爲總是返回index.html請求不是靜態文件，所以它總是正確加載應用程序，並使用角路由。

來源

2017-03-15 13:58:37

我已經設置了'base href'（它是一個角度cli項目）。服務器是具有'ng serve'的本地開發服務器。 – Marty

Angular 2路線在瀏覽器瀏覽器時無法正常工作

回答

相關問題