Question

我已经以非常简单的方式设置了我的角度路由器，但是没有路由加载任何组件，无论我做什么，它们都重定向到”并加载空白页面。 app-root组件始终会加载导航栏，但其他所有路由均无效。

app.routing.module.ts

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

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

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

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// Import Material UI Components
import {MatButtonModule, MatCheckboxModule} from '@angular/material';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatCardModule} from '@angular/material/card';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { ProjectsComponent } from './projects/projects.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProjectsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatButtonModule,
    MatCardModule,
    MatCheckboxModule,
    MatToolbarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
    <mat-toolbar color="primary">
      <span><img width="150" alt="Blitz Logo" src="../assets/blitz_logo_2014_v1_.png"></span>

      <!-- This fills the remaining space of the current row -->
      <span class="fill-remaining-space"></span>

      <span>A Link</span>
    </mat-toolbar>
  </div>
  <router-outlet></router-outlet>

注意：加载默认路由时，它会立即重定向到/home 但随后立即重定向回空白的''。手动地键入'/home'也会立即重定向到''，它为空白。

角路由器将所有路由器重定向到空白页

0 个答案: