路由到角度为 2 的网址

Question

嗨，我是角度 2 的新手，所以请耐心等待。

情况：我想做的是我想从登录页面导航到主页。 主页将完全是一个新页面(它将充当母版页蚂蚁登录页面(。

但是发生的事情是，当我尝试路由到主页时，它给我一个错误，并显示消息："找不到加载'HomeComponent'的主要插座"。我正在努力解决这个问题

这是我的应用程序.模块.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重定向到HomeComponent.html

我希望我清楚这一点。帮帮我这个家伙。在这里挣扎！！

Answer 1

将<router-outlet></router-outlet>添加到您的应用程序中[bootstrapped component]。 这将充当所有组件将加载的基本页面。

像这样的东西

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

Answer 2

您需要在索引.html页面上使用路由器出口。默认加载应用组件，然后在代码成功后路由到主组件。