I'm making a Portfolio with Spring Boot and Angular. I have, in this web page, different sections like skills, experience, projects, education, etc. In each you can add or edit the info, but it requires that you enter to another page.Every time I try to enter to the page or component /nuevaskill for add a new one redirect me to the home page. The only form to create a new skill is enter to the URL directly o using phpmyadmin, and then I don't have any problem to edit the skill created. For make some changes to the portfolio you need to enter like an admin, but this isn't a problem. Here are the next files: model, service,components and templates from skills and new-skills, and the routing-module, and an image from the console that indicates the trace route.
model:
skills.ts
export class Skills{
id?: number;
nombreS: string;
porcentaje: number;
constructor(nombreS: string, porcentaje: number){
this.nombreS=nombreS;
this.porcentaje=porcentaje;
}
}
-------------------------------------------------------------------------------
service
s-skills.service.ts
import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
import { Skills } from "../model/skills";
@Injectable({
providedIn: 'root'
})
export class SSkillsService{
skURL = "http://localhost:8080/skills/"
constructor(private httpClient: HttpClient){}
public lista():Observable<Skills[]>{
return this.httpClient.get<Skills[]>(this.skURL + 'lista');
}
public detail(id: number): Observable<Skills>{
return this.httpClient.get<Skills>(this.skURL + `detail/${id}`);
}
public save(skills: Skills): Observable<any>{
return this.httpClient.post<any>(this.skURL + 'create', skills);
}
public update(id: number, skills: Skills):Observable<any>{
return this.httpClient.put<any>(this.skURL + `update/${id}`, skills);
}
public delete(id: number): Observable<any>{
return this.httpClient.delete<any>(this.skURL + `delete/${id}`);
}
}
-------------------------------------------------------------------------------
skills.component.ts
import { Component, OnInit } from '@angular/core';
import { Skills } from 'src/app/model/skills';
import { SSkillsService } from 'src/app/services/s-skills.service';
import { TokenService } from 'src/app/services/token.service';
@Component({
selector: 'app-skills',
templateUrl: './skills.component.html',
styleUrls: ['./skills.component.css']
})
export class SkillsComponent implements OnInit {
skills: Skills[] = [];
constructor(private sSkills: SSkillsService, private tokenService: TokenService) {
}
isLogged = false;
ngOnInit(): void {
this.cargarSkills();
if(this.tokenService.getToken()){
this.isLogged = true;
} else {
this.isLogged = false;
}
}
cargarSkills():void{
this.sSkills.lista().subscribe(data => {this.skills = data;})
}
delete(id?: number){
if(id != undefined){
this.sSkills.delete(id).subscribe(
data => {
this.cargarSkills();
}, err => {
alert("No se pudo borrar la skill");
}
);
}
}
}
---------------------------------------------------------
skills.component.html
<section class="section_skills p-4">
<div class="cont-start rounded-5" >
<div class="d-flex justify-content-center">
<h1 class="title d-flex justify-content-center pt-5 pb-5">Skills</h1>
<a href="#" class="title pt-4 ps-3">
<i class="bi bi-plus-circle-fill ps-3" routerLink="/nuevaskill" *ngIf="isLogged"></i>
</a>
</div>
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4 text-center pb-5 circulo" *ngFor="let Skill of skills">
<circle-progress
[percent]="(Skill.porcentaje)"
[radius]="100"
[title]="(Skill.nombreS)"
[titleColor]="'white'"
[titleFontSize]="'2em'"
[showUnits]="false"
[showSubtitle]="false"
[outerStrokeWidth]="16"
[innerStrokeWidth]="6"
[outerStrokeColor]="'#0b6986'"
[innerStrokeColor]="'#9CD3D8'"
[animation]="true"
[animationDuration]="400"
[showBackground]="true"
[backgroundColor]="'white'"
[backgroundOpacity]="0.2"
class="pb-2"
></circle-progress>
<div class="pb-3">
<td *ngIf="isLogged">
<button class="btn btn-light" routerLink="/editskill/{{Skill.id}}">
<i class="bi bi-pencil-fill"></i></button>
</td>
<td *ngIf="isLogged">
<button class="btn btn-danger" (click)="delete(Skill.id)">
<i class="bi bi-trash-fill"></i>Borrar</button>
</td>
</div>
</div>
</div>
</div>
</section>
----------------------------------------------------
new-skills.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Skills } from 'src/app/model/skills';
import { SSkillsService } from 'src/app/services/s-skills.service';
@Component({
selector: 'app-new-skills',
templateUrl: './new-skills.component.html',
styleUrls: ['./new-skills.component.css']
})
export class NewSkillsComponent implements OnInit {
nombreS: string;
porcentaje: number;
constructor(private sSkills: SSkillsService, private router: Router) {}
ngOnInit(): void {
}
onCreate():void{
const skill = new Skills(this.nombreS, this.porcentaje);
this.sSkills.save(skill).subscribe(data => {
alert("Skill añadida");
this.router.navigate(['']);
}, err =>{
alert("La creación de una nueva skill falló");
this.router.navigate(['']);
})
}
}
--------------------------------------------------------------------------------------
new-skills.component.html
<div class="container">
<div class="row">
<div>
<form (ngSubmit)="onCreate()" novalidate #f="ngForm" class="pb-3">
<h1 class="d-flex justify-content-center">Incorpore una nueva skill</h1>
<div class="form-group">
<label for="nombreS" class="text-white pt-2 pb-2">Nombre de la skill</label>
<input type="text" class="form-control" name="nombreS" id="nombreS" [(ngModel)]="nombreS" required>
</div>
<div class="form-group">
<label for="porcentaje" class="text-white pt-2 pb-2">Nivel de la skill en porcentaje</label>
<input type="number" class="form-control" name="porcentaje" id="porcentaje" [(ngModel)]="porcentaje" required>
</div>
<button class="btn btn-primary">
Agregar skill
</button>
</form>
</div>
</div>
</div>
-------------------------------------------------------------------------
app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { EditAboutmeComponent } from './components/about-me/edit-aboutme.component';
import { EditEducacionComponent } from './components/education/edit-educacion.component';
import { NewEducacionComponent } from './components/education/new-educacion.component';
import { EditExperienciaComponent } from './components/experience/edit-experiencia.component';
import { NewExperienciaComponent } from './components/experience/new-experiencia.component';
import { HomeComponent } from './components/home/home.component';
import { LoginComponent } from './components/login/login.component';
import { NotFoundComponent } from './components/not-found/not-found.component';
import { EditProyectoComponent } from './components/projects/edit-proyecto.component';
import { NewProyectoComponent } from './components/projects/new-proyecto.component';
import { EditSkillsComponent } from './components/skills/edit-skills.component';
import { NewSkillsComponent } from './components/skills/new-skills.component';
const routes: Routes = [
{path: 'login', component: LoginComponent},
{path: 'nuevaexp', component: NewExperienciaComponent} ,
{path: 'editexp/:id', component: EditExperienciaComponent},
{path: 'nuevaeduc', component: NewEducacionComponent},
{path: 'editeduc/:id', component: EditEducacionComponent},
{path: 'nuevaproy', component: NewProyectoComponent},
{path: 'editproy/:id', component: EditProyectoComponent},
{path: 'editaboutme/:id', component: EditAboutmeComponent},
{path: 'nuevaskill', component: NewSkillsComponent},
{path: 'editskill/:id', component: EditSkillsComponent},
{path: '', component: HomeComponent},
{path: "**", component: NotFoundComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes, { enableTracing: true })],
exports: [RouterModule]
})
export class AppRoutingModule { }
Your router link should be inside the "a" tag
Try the following:
<a [routerLink]="['/nuevaskill']" class="title pt-4 ps-3" *ngIf="isLogged">
<i class="bi bi-plus-circle-fill ps-3"></i>
</a>