Angular 无法使用路由重定向到新组件

Question

我正在构建一个小应用程序，但不知何故，它没有重定向。我正在尝试打开 IntroComponent，但是当我点击我的链接或尝试打开它时没有任何反应：

这些是我的代码：

app.component.html：

<app-countries-select></app-countries-select>

<router-outlet></router-outlet>

app-routing.module.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CountriesSelectComponent } from './home/countries-select/countries-select.component';
import { IntroComponent } from './intro/intro.component';

const routes: Routes = [
  { path: 'intro', component: IntroComponent },
  { path: 'countries-select', component: CountriesSelectComponent },
  { path: '',   redirectTo: '/countries-select', pathMatch: 'full' },
  { path: '**', component: CountriesSelectComponent }
];

@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 { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { CountriesSelectComponent } from './home/countries-select/countries-select.component';
import { FormsModule } from '@angular/forms';
import { FormComponent } from './form/form.component';
import { IntroComponent } from './intro/intro.component';
import { OptionsComponent } from './options/options.component';
import { AboutComponent } from './about/about.component';

@NgModule({
  declarations: [
    AppComponent,
    CountriesSelectComponent,
    FormComponent,
    IntroComponent,
    OptionsComponent,
    AboutComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    AppRoutingModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

countries-select.component.html：

<div class="container text-center">
  <h2 for="welcome">Welcome to Spain</h2>
  <p>Choose Your Country of Origin</p>

  <div>
    <ul class="list-group" [style.height.px]="innerHeight">
      <li *ngFor="let country of countriesList" class="list-group-item">
        <a routerLink="/intro"  routerLinkActive="active">
          <img class="countryImg" [src]="'/assets/img/countries/' + country.flag + '.png'" /> {{ country.name }}
        </a>
      </li>
    </ul>
  </div>
</div>

intro.component.html：

<div class="container text-center">
  <video poster="" id="v" playsinline autoplay webkit-playsinline (ended)="introEnded()">
    <source src="assets/vid.mp4" type="video/mp4">
  </video>

  <a href="#" class="btn btn-success text-right">Next</a>
</div>

另外，这是我的 GitHub 存储库：https://github.com/FANMixco/AsylumAssistant/tree/basic-forms-UIs

有人知道我做错了什么吗？

Answer 1

只需从app-component.html 中删除app-countries-select，然后将其替换为router-outlet

同时更改[routerLink]="['intro']" to [routerLink]="['/intro']"

Answer 2

我尝试在本地构建您的应用，发现一切正常。 可能是因为您将CountriesSelectComponent 放在app.component.html 之上，所以您没有意识到下面出现了介绍组件。

如果这不是您的意图，只需从 app.component.html 中删除 <app-countries-select></app-countries-select>。