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

【问题标题】：How to redirect to other routerlink in Angular?如何重定向到Angular中的其他路由器链接？
【发布时间】：2020-02-24 09:59:38
【问题描述】：

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

我的项目中有两个routerlink = 添加学生，学生列表。

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

The project folder in Github

app.module.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>

read.component.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>

write.component.ts

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

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

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

【问题讨论】：

你有什么错误吗？
我没有收到错误只是我的代码不起作用，我尝试使用 paramMap 和 routerLink
你的 AppModule 导入中是否导入了路由器模块

标签： javascript html angular

【解决方案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');
      }

【讨论】：

【解决方案2】：

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

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

【讨论】：