Question

我是角度开发的新手，我尝试将路由添加到我的应用程序中，但它适用于某些路线但不适用于某些路线我不知道我的路线编码有什么问题例如，当我路由/events时，当它路由events/:id时它工作正常，但是当我路由/test时，这不起作用。

这是我的文件和代码，请给我建议

APP-component.js

import { Component } from '@angular/core'
@Component({
    selector: 'event-app',
    template: `
        <navbar></navbar>
        <router-outlet></router-outlet>
    `})
export class EventAppComponent{ }

test.component.ts

import { Component } from '@angular/core'
@Component({
    template: `<h1>Hello from testing component</h1>`
})
export class TestComponent{ }

routes.ts

import { Routes } from '@angular/router'
import { EventListComponent } from './events/events-list.component'
import { EventDetailComponent } from './events/event-details/event-detail.component'
import { CreateEventComponent } from './events/event-create.component'
import { Error404Component } from './error/404.component'
import { EventRouteActivator } from './events/events-route.activator.service'
import { EventsListResolverService } from './events/events-list.resolver.service'
import { TestComponent } from './test/test.component'

export const AppRoutes: Routes = [
    { path: 'events/new', component: CreateEventComponent },
    { path: '404', component: Error404Component },
    { path: 'test', component: TestComponent },
    { path: 'events', component: EventListComponent, resolve: {events: EventsListResolverService} },
    { path: 'events/:id', component: EventDetailComponent, 
        canActivate:[EventRouteActivator] },
    { path: '', redirectTo: '/events', pathMatch: 'full' },
]

APP-module.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RouterModule } from '@angular/router'
import { EventAppComponent } from './app.component'
import { EventListComponent } from './events/events-list.component'
import { EventListThumbnailComponent } from './events/events-list.thumbnail.component'
import { EventDetailComponent } from './events/event-details/event-detail.component'
import { NavbarComponent } from './nav/navbar.component'
import { EventService } from './events/events-service'
import { ToastrService } from './common/toastr.service'
import { CreateEventComponent } from './events/event-create.component'
import { Error404Component } from './error/404.component'
import { EventRouteActivator } from './events/events-route.activator.service'
import { EventsListResolverService } from './events/events-list.resolver.service'
import { TestComponent } from './test/test.component'
import { AppRoutes } from './routs'

@NgModule({

    imports : [ 
        BrowserModule,
        RouterModule.forRoot(AppRoutes,
            { enableTracing: true })
    ],
    declarations: [
        EventAppComponent,
        EventListComponent,
        EventListThumbnailComponent,
        EventDetailComponent,
        NavbarComponent,
        CreateEventComponent,
        Error404Component,
        TestComponent
    ],
    providers: [ 
        EventService,
        ToastrService,
        EventRouteActivator,
        EventsListResolverService
    ],
    bootstrap: [ EventAppComponent ]

})
export class AppModule{ }

Answer 1

我创建了Plunker，其中包含对测试模块的工作导航。问题可能在导航中使用了关系路径而不是绝对路径。为了更好地理解，请检查Angular routing documentation。

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <button routerLink="/test">Navigate to test</button>
    </div>
    <router-outlet></router-outlet>
  `,
})
export class App {
  name:string;

  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule, RouterModule.forRoot(AppRoutes,
            { enableTracing: true }) ],
  declarations: [ App, TestComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

角度2显示＆＃34;未找到＆＃34;当路由到/ test时

1 个答案: