我是Angular4的新手 .
当我试图探索Angular4中的路由时，我收到以下错误
EXCEPTION：未捕获（承诺）：错误：无法找到加载'AppComponent'的主要插座
我检查了要修复的链接数量，但还没有用 .
这就是app的样子 .
的index.html
<body>
<app-root>Loading...</app-root>
<router-outlet> </router-outlet>
</body>
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 {RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { CustomerComponent } from './component/customer/customer.component';
import {appRoutes} from './app.routes';
@NgModule({
declarations: [
AppComponent,
CustomerComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(appRoutes,{useHash:true})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.routes.ts
import {RouterModule, Routes } from '@angular/router';
import {AppComponent} from './app.component';
import {CustomerComponent} from './component/customer/customer.component';
export const appRoutes: Routes = [
{ path: '', component: AppComponent },
{ path: 'customer', component: CustomerComponent },
{
path: 'heroes',
component: AppComponent,
data: { title: 'Heroes List' }
},
{ path: '',
redirectTo: '/heroes',
pathMatch: 'full'
},
{ path: '**', component: AppComponent }];
app.component.html
<h1> {{title}} </h1>
<a router-link="">Home</a>
<a router-link="customer">customer </a>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}
What configuration is lacking here to get routing in action??
2 回答
请正确使用routerlink配置，如下所示 .
<a [routerLink]="['/customer']">customer</a>将生成链接/客户/将
<router-outlet> </router-outlet>从index.html移至app.component.html将app.component.html中的所有链接从
<a router-link="customer">customer </a>更改为<a routerLink="/customer">customer </a>