路由到角度 2 中的 url答案

【问题标题】：Route to a url in angular 2路由到角度 2 中的 url
【发布时间】：2017-08-08 19:05:18
【问题描述】：

您好，我是 Angular 2 的新手，所以请多多包涵。

情况：我想做的是从登录页面导航到主页。主页将完全是一个新页面（不会作为母版页蚂蚁登录页面）。

但发生的情况是，当我尝试路由到家时，它给了我一个错误消息：'找不到主要出口来加载'HomeComponent''。我正在努力解决这个问题

这是我的 app.module.ts 文件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { Routes,RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component'

const appRoutes:Routes=[
  {path:'App',component:AppComponent}, 
  {path:'home',component:HomeComponent}
];



@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    RouterModule.forRoot(appRoutes,{enableTracing:false}),
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我没有提到任何地方，因为我在这里没有包含任何子组件或子视图。我想用全新的设计重定向，这将进一步有子组件。

我的 AppComponenet 基本上会显示登录页面，所以在成功登录后我想使用 home.html 重定向到 HomeComponent

我希望我清楚这一点。帮我解决这个问题。在这里挣扎！！

【问题讨论】：

我们还需要查看模板。我怀疑你错过了router outlet。

标签： angular routing angular2-routing angular2-components

【解决方案1】：

将<router-outlet></router-outlet> 添加到您的app.component 中，即[bootstrapped component]。这将作为加载所有组件的基本页面。

类似的东西

    @Component({
      selector: 'app-component',
      template: `
        <p>
          app-component works!
        </p>
        <router-outlet></router-outlet>
      `,
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {

  constructor() { }

}

【讨论】：

【解决方案2】：

您需要在 Index.html 页面上使用 Router Outlet。默认加载app组件，代码成功后路由到Home Component。

【讨论】：