Angular 2路由 - 无法找到主要插座加载'AppComponent'

问题描述：

我想创建一个简单的角度应用程序，我已经创建了一个登录组件。Angular 2路由 - 无法找到主要插座加载'AppComponent'

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

然后，我曾试图用角导航创建一个路由文件

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);

代码文件的参考已经采取APP模块

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抛出错误']）;

无法找到主要出口到装载 'DashBoardComponent'

我曾试图放置上 1.登录 2. Dasboard。 3 On Both

但仍然能够解决。

请显示您的html代码 – sainu

您必须在您的基本组件的模板上粘贴 router-outlet> – sainu

答

看来你已经错过了<router-outlet></router-outlet>充当占位符，并通过导航路由指向模板更换。

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

答

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

我的git的枢纽回购后 - https://github.com/rahulrsingh09/AngularConcepts/blob/master/src/app/app.component.html

Angular 2路由 - 无法找到主要插座加载'AppComponent'

相关推荐