Javascript 角度2(CLI)路由don';t工作(无法读取未定义的属性';拆分')
为什么路由仅适用于AppComponent之后的第一个导入组件(下面的示例代码:路由仅适用于“PageNonFound”)?此外,我还注意到在将路由添加到项目中后出现的错误 错误 App.module.tsJavascript 角度2(CLI)路由don';t工作(无法读取未定义的属性';拆分'),javascript,angularjs,angular,typescript,url-routing,Javascript,Angularjs,Angular,Typescript,Url Routing,为什么路由仅适用于AppComponent之后的第一个导入组件(下面的示例代码:路由仅适用于“PageNonFound”)?此外,我还注意到在将路由添加到项目中后出现的错误 错误 App.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms';
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 { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { HomeComponent } from './home/home.component';
const appRoutes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent },
{ path: 'home', component: HomeComponent }
];
@NgModule({
declarations: [
AppComponent,
PageNotFoundComponent,
HomeComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(appRoutes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
App.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'testing';
}
App.component.html
<nav class="nav navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" [routerLink]="['/home']">Test</a>
</div>
<div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li><a [routerLink]="['/home']" [routerLinkActive]="active">Home</a></li>
</ul>
</div>
</div>
</div>
</nav>
<router-outlet></router-outlet>
使用
routerLinkActive=“active”
或
[routerLinkActive]=“['active']”
以及更改路线的次序
const appRoutes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent },
];
分享你的
app.component.html
@Omarlliasdone@Omarllias错误消失,但路由仍然不起作用:“/home”-路由将我发送到页面查找更改路由顺序更改对我有效的路由顺序。谢谢错误不是描述发生了什么
angular-cli: 1.0.0-beta.28.3
node: 6.9.4
os: darwin x64
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/core: 2.4.9
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/compiler-cli: 2.4.9
const appRoutes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent },
];