Question

所以我制作了一款效果很好的应用程序，但后来我发现菜鸟顶上有两个链接就可以了，所以我按照这个教程：https://angular.io/docs/ts/latest/guide/router.html但是出了点问题。我无法使它工作，并出现此错误：获取http://localhost:3000/about/about.component 404（未找到）获取http://localhost:3000/home/home.component 404（未找到）

VSCode没有显示任何问题。

主文件结构：

src
├───about
│ ├───about.component.html
│ ├───about.component.ts (and other .js and .js.map files)
├───app
│ ├───app.component.ts
│ ├───app.module.ts (and other .js and .js.map files...)
├───home
│ ├───home.component.html
│ ├───home.component.ts (other less relevant files)

index.html中的

我添加了

app.module.ts：

import { RouterModule, Routes } from '@angular/router'
...
import { AppComponent }  from './app.component';
import { AboutComponent } from './../about/about.component';
import { HomeComponent } from './../home/home.component';

const appRoutes: Routes = [
  {
    path: '/home/home', //I've also tried home/home, home and so on
    component: HomeComponent,
  },
  {
    path: '/about/about',
    component: AboutComponent,
  },
]

@NgModule({
    imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    HttpModule,
    ReactiveFormsModule,
    RouterModule.forRoot(appRoutes),
    ....],
      declarations: [ AppComponent, AboutComponent, HomeComponent ],
    ....

app.component.ts：

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

@Component({
  selector: 'my-app',
  template: `
    <nav>
      <a routerLink="/home" routerLinkActive="active">Home</a>
      <a routerLink="/about" routerLinkActive="active">About</a>
    </nav>
    <router-outlet></router-outlet>
  `
})

export class AppComponent {

}

about.component.ts：

import { Component } from '@angular/core'

@Component({
  selector: 'about',
  moduleId: module.id,
  template: `
  <p>ABOUT</p>
  `,
})

export class AboutComponent {

}

home.component.ts：

// imports

@Component({
  selector: 'home',
  moduleId: module.id,
  templateUrl: 'home.component.html',
  styleUrls: ['home.css'],
  providers: [HomeService],
})
export class HomeComponent {
// ...
}

问题可能与routerLink相关，但我尝试了几种不同的选项，但它没有用。

Answer 1

访问这些路线：

http://localhost:3000/about/

http://localhost:3000/home/

使用此配置：

 const appRoutes: Routes = [
      {
        path: 'home',
        component: HomeComponent,
      },
      {
        path: 'about',
        component: AboutComponent,
      },
    ]

在HomeComponent templateUrl和styleUrls中home.component.html使用相对路径，并将home.css和HomeComponent放在与@Component({ selector: 'home', moduleId: module.id, templateUrl: './home.component.html', styleUrls: ['./home.css'], providers: [HomeService], }) export class HomeComponent { // ... }相同的文件夹中：

Template.payment.onRendered

Angular2中的路由 - GET 404（未找到）

1 个答案: