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

我正在开发一个小应用程序，但不知怎么的，它并没有重定向。我试图打开内部组件，但当我点击我的链接或试图打开它时，什么都没有发生：

以下是我的代码：

app.component.html:

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

<router-outlet></router-outlet>

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 { }

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 { }

<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>

<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>

app.module.ts:

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

<router-outlet></router-outlet>

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 { }

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 { }

<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>

<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>

国家/地区选择.component.html:

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

<router-outlet></router-outlet>

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 { }

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 { }

<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>

<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回购协议：

---

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

只需从

app component.html

中删除

app countries select

，然后将其替换为

路由器插座

---

另外，将[code>[routerLink]=“['intro']”更改为[routerLink]=“['/intro']”

我尝试在本地构建你的应用程序，发现一切正常。 可能是因为您正在将

CountriesSelectComponent

放在

app.component.html

的顶部，所以您没有意识到下面会显示介绍组件

---

如果这不是您的意图，只需删除

，这是否回答了您的问题？你能从app.component.html中删除该组件并重试吗？谢谢Lakindu，但它出于任何原因复制了该组件，但仍然无法工作。复制是什么意思？你能附上一张屏幕快照吗？你是说它复制了
国家选择组件吗？你能给我看一下更新后的代码吗？这是图片：你好，Kien，你下载了分支吗？因为这不是我的观点。这应该是下面的另一个视图。我从您的
basic forms ui
分支构建了它。这是我单击
/intro
并滚动到底部时的视图。