While working with Angular5, I have encountered an issue where I lose data when trying to go back in the browser. Essentially, I want the previous component to be loaded with its data intact.
For example:
Here is a snippet from my component:
import { Location } from '@angular/common';
@Component({
selector: 'app-mant-cert-certificacion',
templateUrl: './mant-cert-certificacion.component.html',
styles: []
})
export class MantCertCertificacionComponent implements OnInit {
constructor(private location: Location) {
}
goBack() {
this.location.back();
console.log( 'goBack()...' );
}
}
And here's how it's implemented in the HTML file (mant-cert-certificacion.component.html):
<a href="javascript:void(0)" (click)="goBack()">
<- Back
</a>
When this component is called from my router module, I want to make sure that clicking on the "go back" button loads the previous component along with its data.
This is how my router module looks like:
export const routes: Routes = [
{ path: 'xxxx', children: [
{ path: '', component: XComponent},
]},
{ path: 'yyyy', children: [
{ path: 'contractdetail/', component: MantCertCertificacionComponent}
]}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class MantenedoresCertRoutingModule { }
Any suggestions on how to achieve this?
The previous component in question would be "XComponent". The specifics of the data don't matter, I simply need it to load properly. Thank you!
Appreciate any help provided.