angular - Angular 2 - 基于文件的应用程序的路由问题 - Thinbug

Angular 2 - 基于文件的应用程序的路由问题

时间：2016-11-22 02:24:46

标签： angular webpack routes typescript2.0

我已经根据几个主题和教程修补了这一个，但似乎没有一个解决这个问题。我有一个小应用程序，从文件系统而不是通过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"
  }

的WebPack

 entry: {
    'angular2': [
      'zone.js',
      'rxjs',
      'reflect-metadata',
      '@angular/core'
    ],
    'app': './app/app'
  },

的index.html

<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>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  templateUrl: 'templates/selectFile.html'
})

export class AppComponent {
}

模板/ selectFiles.html

<div id="selectFile">
  <a href="" id="fileselect"></a>
</div>
<router-outlet></router-outlet>

character.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  templateUrl: 'templates/character.html'
})

export class CharacterComponent {
}

模板/ character.html

<div id="selectFile">
  character <br />
</div>
<router-outlet></router-outlet>

app.module.ts

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 { }

1 个答案:

答案 0 :(得分：1)

引导您的应用组件，它始终位于页面上。路由器将把适当的组件放入<?php echo "<script>addIP(ip);</script>"; ?>标签中（实际上处于同一级别，但这不是重点）。

问题是，您希望空路线<router-outlet></router-outlet>在哪里？您可能已加载''，或者您可能希望使用HomePageComponent选项重定向到CharacterComponent。

redirectTo