javascript - Angular 路线不起作用并且不改变当前 View

Question

我使用“nggenerate组件”创建了一个新组件，但是在按下导航url后，目标 View 没有加载，我不知道为什么。 url 将正确更改，但 View 不会更改。

export class AppComponent {
  title = 'Overview';

  constructor(private router: Router) { }

  onPressStart($event){    

    this.router.navigate(['/start']);
  }  

}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StartComponent } from './start/start.component';

@NgModule({
  declarations: [
    AppComponent,
    StartComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

应用程序路由.mdoules.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { StartComponent } from './start/start.component';
import {AppComponent} from './app.component';

const routes: Routes = [ {path: "", component:AppComponent},  {path: "start", component: StartComponent} ];

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

Answer 1

AppComponent和StartComponent不应该像你一样是 sibling 。 AppComponent是引导的，这意味着它是您的根组件，您不应该尝试使用路由加载它。

所以只需输入 <router-outlet></router-outlet>里面AppComponent它将充当路由加载组件的占位符。

然后删除AppComponent从 route ，您的所有路线都将起作用。