我一直在根据多个主题和教程修改这个主题，但似乎都没有一个解决这个特定问题的方法。我有一个小的应用程序，它是从文件系统而不是通过HTTP加载的。无论我如何调整设置，index.html#/character还是index.html#character将始终路由到AppComponent而不是CharacterComponent。如果我将引导程序app.module.ts从更改AppComponent为CharacterComponent，它将显示字符。我有一种感觉，我只是缺少一个可以正确在组件之间进行路由的路由配置。
"devDependencies": {
"awesome-typescript-loader": "^3.0.0-beta.3",
"babel-core": "^6.18.2",
"concurrently": "^3.1.0",
"es6-shim": "^0.35.1",
"lite-server": "^2.2.2",
"typescript": "^2.0.10",
"webpack": "^2.1.0-beta.25"
},
"dependencies": {
"@angular/common": "2.2.1",
"@angular/compiler": "2.2.1",
"@angular/core": "2.2.1",
"@angular/http": "2.2.1",
"@angular/platform-browser": "2.2.1",
"@angular/platform-browser-dynamic": "2.2.1",
"@angular/router": "3.2.1",
"angular-in-memory-web-api": "~0.1.15",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-rc.4",
"zone.js": "^0.6.26",
"ui-router-ng2": "^1.0.0-beta.3"
}
entry: {
'angular2': [
'zone.js',
'rxjs',
'reflect-metadata',
'@angular/core'
],
'app': './app/app'
},
<html>
<head>
<base href="">
<meta charset="UTF-8">
<title>test app</title>
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
<div class="container">
<app></app>
</div>
<script src="../build/common.js"></script>
<script src="../build/angular2.js"></script>
<script src="../build/app.js"></script>
</body>
</html>
import { Component } from '@angular/core';
@Component({
selector: 'app',
templateUrl: 'templates/selectFile.html'
})
export class AppComponent {
}
<div id="selectFile">
<a href="" id="fileselect"></a>
</div>
<router-outlet></router-outlet>
import { Component } from '@angular/core';
@Component({
selector: 'app',
templateUrl: 'templates/character.html'
})
export class CharacterComponent {
}
<div id="selectFile">
character <br />
</div>
<router-outlet></router-outlet>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { AppComponent } from './app.component';
import { CharacterComponent } from './character.component';
const routes: Routes = [
{ path: 'character', component: CharacterComponent },
{ path: '', component: AppComponent }
]
@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot(routes)
],
declarations: [
AppComponent,
CharacterComponent
],
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
bootstrap: [ AppComponent ]
})
export class AppModule { }
引导您的应用程序组件，该组件将始终在页面上。路由器将把适当的组件放入<router-outlet></router-outlet>标签中（实际上是在同一级别，但这并不重要）。
问题是，您想让空路''走到哪里？您可能HomePageComponent加载了一个，或者您可能想CharacterComponent使用该redirectTo选项重定向到您的。
{
path: '',
redirectTo: '/character',
pathMatch: 'full'
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句