Angular 2 路由 - 找不到要加载的主要出口 'AppComponent'

Question

我正在尝试创建一个简单的 angular 应用程序，我在其中创建了一个登录组件。

成功登录用户需要登陆仪表板页面后，我也创建了一个仪表板组件。

然后我尝试使用Angular导航创建了一个路由文件

import { RouterModule, Routes } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { DashBoardComponent } from './dash-board/dash-board.component';

export const rotuer: Routes = [
{ path: 'dashBoard', component: DashBoardComponent },
 { path: 'App', component: AppComponent },
// { path: '**', component: PageNotFoundComponent }
 ];
 export const routes: ModuleWithProviders  =RouterModule.forRoot(rotuer);

应用程序模块引用了代码文件

import {routes} from './app.route'

imports: [
   BrowserModule,
  FormsModule,
 HttpModule,
 routes,
// RouterModule.forRoot(appRoutes)

],

现在我在登录组件上有一个登录按钮，单击它我将调用一个函数

 login() {
     alert(this.user.email);
      alert(this.user.password);
    // this.router.navigate(['/hero']);
      this.router.navigate(['App']);
   }

我能够收到用户电子邮件和密码，但是 this.router.navigate(['App']);或 this.router.navigate(['DashBoard is throwing error']);

找不到要加载的主要插座'DashBoardComponent'

我试过放置在 1. 登入 2. 仪表板。 3 在双页上

但还是n 无法解决。

Answer 1

您必须在要加载组件的组件模板上粘贴 <router-outlet></router-outlet>。

我的 git 中心回购 post - https://github.com/rahulrsingh09/AngularConcepts/blob/master/src/app/app.component.html

Answer 2

您似乎错过了 <router-outlet></router-outlet>，它充当占位符并被导航路线指向的模板所取代。

将 <router-outlet></router-outlet> 放在您尝试导航到仪表板页面的页面中。它应该可以解决您的问题。

Angular 2 路由 - 找不到要加载的主要出口 'AppComponent'

Angular 2 Routing- Cannot find primary outlet to load 'AppComponent'

angular2-routing

angular