导航/路由在 Angular 中不起作用

我从 Angular 开始并修改官方教程。

我开始做一些基本的导航（民意调查列表并查找每个人的详细信息），它工作得很好，但后来我添加了一些封装（即为民意调查创建一个接口，并注入一个服务来提供数据）和然后突然导航不再起作用。

app.module.ts是_

@NgModule({
  declarations: [
    AppComponent,
    EncuestaComponent,
    ListaEncuestaComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: '', component: ListaEncuestaComponent },
      { path: 'encuesta/:idEncuesta', component: EncuestaComponent }]),
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我有主要组件，民意调查列表

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

  titulos: string[] = ['Encuesta1', 'Encuesta2', 'Encuesta3'];

  encuestas!: Encuesta[];

  constructor(private encuestaService: EncuestaService) {
    console.log('En ListaEncuestaComponent.constructor');
  }

  ngOnInit(): void {
    this.encuestas = this.encuestaService.getEncuestas();
  }
}

和民意调查的组件：

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

  encuesta!: Encuesta;
 
  constructor(private activatedRouter : ActivatedRoute,
              private encuestaService : EncuestaService) {
    console.log('En EncuestaComponent.constructor');
  }

  ngOnInit(): void {
    console.log("En EncuestaComponent.ngOnInit()");
    const routeParams = this.activatedRouter.snapshot.paramMap;
    const idEncuesta = Number(routeParams.get('idEncuesta'));
    console.log("En EncuestaComponent.ngOnInit(), idEncuesta: " + idEncuesta);
    this.encuesta = this.encuestaService.getById(idEncuesta);
  }
}

民意调查列表按原样显示，包含 URL 的链接列表（http://localhost:4200/encuesta/1、http://localhost:4200/encuesta/2）。但是，如果我转到这些，它会再次向我显示相同的链接列表，并且在控制台中，日志告诉我已调用的组件是轮询列表，而不是轮询组件：

我究竟做错了什么？

更新：HTML 的 app.component.html

<app-lista-encuesta></app-lista-encuesta>

轮询列表.component.html

<p>Lista de encuestas</p>
<p></p>
<div *ngFor="let encuesta of encuestas">
<a [title]="encuesta.titulo" [routerLink]="['/encuesta', encuesta.titulo]">{{encuesta.titulo}}</a>
</div>

调查.component.html

<p>Id: {{encuesta.id}}
<p>Título: {{encuesta.titulo}}</p>
<p></p>
<div *ngFor="let opcion of encuesta.opciones">
{{opcion}}
</div>

我也尝试过@H0-pe 建议，因此我从app.module.ts的导入中删除了RouterModule，并且确实将路由添加到app-routing.module.ts，但它的工作原理相同。

const routes: Routes = [
  { path: '', component: ListaEncuestaComponent },
  { path: 'encuesta/:idCodigo', component: EncuestaComponent }
];