无论我做什么都无法打开Angular组件页面

Question

我尝试了一切方法来在 Angular 中打开组件页面。但是，始终只打开主页，显示“恭喜！您的应用程序正在运行”，即“app.component.html”文件。如何在 http://localhost:4200/ 页面上打开“player-drag-drop.component.html”？

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PlayerDragDropComponent } from './player-drag-drop/player-drag-drop.component';
import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
  declarations: [
    // ... other components
    PlayerDragDropComponent
  ],
  imports: [
    // ... other modules
    DragDropModule
  ],
  bootstrap: [PlayerDragDropComponent]
})

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

player-drag-drop.component.html

<div class="container">
    <div class="players-list" cdkDropList (cdkDropListDropped)="onPlayerDropped($event)">
      <div *ngFor="let player of players" cdkDrag>{{ player.name }}</div>
    </div>
    
    <div class="field" cdkDropList (cdkDropListDropped)="onFieldDropped($event)">
      <div *ngFor="let position of fieldPositions" cdkDrag>{{ getFieldPlayer(position) }}</div>
    </div>
  </div>

player-drag-drop.component.ts

import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-player-drag-drop',
  templateUrl: './player-drag-drop.component.html',
  styleUrls: ['./player-drag-drop.component.css']
})
export class PlayerDragDropComponent {
  players = [
    { name: 'Player 1', position: '' },
    { name: 'Player 2', position: '' },
  ];

  fieldPositions = ['Position 1', 'Position 2', 'Position 3', 'Position 4', 'Position 5'];

  onPlayerDropped(event: CdkDragDrop<string[]>): void {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
    }
  }

  onFieldDropped(event: CdkDragDrop<string[]>): void {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
    }
  }

  getFieldPlayer(position: string): string {
    const player = this.players.find(p => p.position === position);
    return player ? player.name : '';
  }
}

非常感谢任何帮助

Answer 1

1. 应用程序模块内部：

   RouterModule.forRoot({route: 'pageroute', component: YourComponent })

2. app.component.html 内部：

   <router-outlet></router-outlet>

...更多：https://angular.io/tutorial/tour-of-heroes/toh-pt5