Я делаю проект, который позволяет пользователю заполнять данные об ученике, и это кнопка Редактировать , которая отображает сведения об ученике в области ввода.
Есть два routerlink в моем проекте = Добавить студента , Список учеников .
Я хочу перенаправить проект на Добавить студента страницу, когда я нажимаю кнопку Изменить в Список студентов , но я не могу этого сделать.
Папка проекта в 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: ''};
}