如何重定向到 Angular 中的其他路由器链接？

Question

我正在做一个可以让用户填写学生详细信息的项目，这是一个编辑按钮，它将在输入区域中显示学生详细信息。

我的项目中有两个 routerlink = Add student , Student List 。

当我单击学生列表中的编辑按钮时，我希望项目重定向到添加学生页面，但我不能这样做。

Github 中的项目文件夹

应用模块.html

<html><h1>{{title}}</h1>

<nav>
  <a class="link" routerLink="/write" routerLinkActive="active">Add Student</a>
  <a class="link" routerLink="/read" routerLinkActive="active">Student List</a>
</nav>

<router-outlet></router-outlet>
</html>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { WriteComponent } from './write/write.component'
import { ReadComponent } from './read/read.component';

const routes: Routes = [
  {path:"write",component:WriteComponent},
  {path:"read",component:ReadComponent},
  {path:'index',component:ReadComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [ WriteComponent,ReadComponent]

read.component.html //学生名单页面

 <div class="user-list" *ngIf="usersList && usersList.length" >
    <h2>List of Student</h2>
    <table class="table table-condensed">
        <thead>
        <tr>
            <th>SL.No</th>
            <th>Name</th>
            <th>Age</th>
            <th>College</th>
            <th>Action</th>
        </tr>
        </thead>
        <tbody>
            <tr  *ngFor="let user of usersList; let i = index" >
                <th>{{i}}</th>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>{{user.college}}</td>
                <td>
                    <button style="margin-right: 5px;" class="btn-warning" (click)="onSelect(i)" (click)="editStudent(i)">Edit</button>
                    <a [routerLink]="['/write']"></a>
                    <button class="btn-danger" (click)="deleteStudent(i)">Delete</button>
                </td>
            </tr>
        </tbody>
    </table>
  </div>

读取组件.ts

import { Component, OnInit } from '@angular/core';
import { Student } from '../student';
import { ActivatedRoute , Router, ParamMap} from '@angular/router';


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


public index;
  constructor(private route : ActivatedRoute, private router : Router) { }

  user: User;
  usersList: User[] = [
   {name:"Johnny",age:'22',college:"INTI"},
   {name:"Samantha",age:'26',college:"Harvard"},
   {name:"Zoe",age:'21',college:"TARUC"},
    {name:"Chris",age:'25',college:"Sunway"},

  ]



  ngOnInit(): void {
   this.resetForm();

   this.route.paramMap.subscribe((params:ParamMap) => {
   let Index = parseInt(this.route.snapshot.paramMap.get('index'));
    this.index = Index;
   });

  }
  editStudent(index: number) {
    this.user = this.usersList[index];
    this.deleteStudent(index);
  }

  deleteStudent(index: number) {
    this.usersList.splice(index, 1);
  }
  resetForm() {
    this.user = {age: null, name: '', college: ''};
   }

onSelect(index : number){
  this.router.navigate(['/user',index])
}

}
interface User {
  name: string;
  age: string;
  college: string;
 }

write.component.html //添加学生页面，列表一样我就不在这里发了，不然代码太多了

<div class="container">
  <h2>Add Student</h2>
  <form class="form-inline" autocomplete="off" (submit)="addStudent()">
      <div class="form-group">
        <label for="email">Name:</label>
        <input type="text" class="form-control" id="name" name="name" [(ngModel)]="user.name"  >
      </div>
      <div class="form-group">
        <label for="pwd">Age:</label>
        <input type="number" class="form-control" id="age" name="age" [(ngModel)]="user.age">
      </div>
      <div class="form-group">
          <label for="pwd">College:</label>
          <input type="text" class="form-control" id="college" name="college" [(ngModel)]="user.college">
        </div>
      <button type="submit" class="btn-success">Submit</button>

    </form>

写.component.ts

ngOnInit(): void {
   this.resetForm();
  }

  addStudent() {
   this.usersList.push(this.user);
   this.resetForm();
  }

 resetForm() {
   this.user = {age: null, name: '', college: ''};
  }

Answer 1

  // read.component.html
  <button style="margin-right: 5px;" class="btn-warning" (click)="editStudent(i)">Edit</button>
  // read.component.ts 
  editStudent(index: number) {
        this.user = this.usersList[index];
        this.deleteStudent(index);
        this.router.navigateByUrl('/write');
      }

Answer 2

在 read.component.html 文件中<a [routerLink]="['/write']"></a>将不起作用，因为您没有在其中添加任何文本，因此它不会显示在网络中，而不是，你可以在

editStudent(index: number) {
    this.user = this.usersList[index];
    this.deleteStudent(index);
    this.router.navigate(['/write']);
  }