Question

我正在尝试为Angular 2项目创建路由。无论我使用哪种路线，页面都会加载app.component.ts。

在app.module.ts我有：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';
import { RouterModule } from "@angular/router";

import { OrderModule } from 'ngx-order-pipe';

import { AppRoutingModule } from "./app-routing.module";
import { MovieSearchComponent } from "./movie_search/movie_search.component";
import { MovieAddComponent }         from "./movie_add/movie_add.component";
import { MovieDeleteComponent } from "./movie_delete/movie_delete.component";
import { A2tUiModule, Angular2TokenService} from "angular2-token";
import { HomeComponent } from './home/home.component';
import { AppComponent } from './app.component';



@NgModule({
  declarations: [
    MovieSearchComponent,
    MovieAddComponent,
    MovieDeleteComponent,
    HomeComponent,
    AppComponent,
  ],
  imports: [
    AppRoutingModule,
    BrowserModule,
    FormsModule,
    RouterModule,
    HttpModule,
    JsonpModule,
    OrderModule,
    A2tUiModule,
  ],
  providers: [
    Angular2TokenService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的app.component.ts：

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

import { AppService }           from "./app.service";
import { Movie }                from './movie';
import { MovieDeleteService }   from "./movie_delete/movie_delete.service";
import { Angular2TokenService } from "angular2-token";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [
    AppService,
    MovieDeleteService,
    Angular2TokenService
  ]
})

export class AppComponent {
  title = 'app works!';
  movies: Movie[] = [];

  constructor(
    private  appService: AppService
  ){}

  ngOnInit(){
    this.getMovies();
  }

  getMovies(){
    this.appService.getMovies()
      .subscribe((response)=>{
        this.movies = response;
      });
  }
}

最后是app-routing.module.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import {HomeComponent} from "./home/home.component";

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule { }

路由做了些什么。因为如果我去/ home（在路由模块中添加）我就不会收到错误。但如果我去/家，我会收到错误：

错误错误：未捕获（在承诺中）：错误：无法匹配任何路由。网址细分：＆＃39;家庭＆＃39;

这是我的home.component.ts：

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    console.log('HomeComponent')
  }

}

Answer 1

为了让您的路由系统正常工作。您需要在引导组件中添加router-outlet标记。这样，当前导航的组件将在此标记中动态创建。

app.component覆盖路由中的app-routing.module

1 个答案: