Reputation: 2611
I'm having an issue in my Angular 6 app where I perform a successful navigation to another view, but then it's automatically redirecting me back to the index view. I successfully see the contents of the component on screen, ngOnInit
fires, and I can also get the route params out of the ActivatedRoute
.
If I enter the URL manually in the address bar, it doesn't navigate back to home.
Can anyone see where I'm going wrong? Cheers in advance.
Update 1
If I use an a
rather than a button
, it doesn't redirect.
<!-- this will cause the route to redirect back -->
<button
class="btn btn-default btn-sm pull-right"
[routerLink]="['/destination', _destination.placeId]">
Edit...
</button>
<!-- This works! -->
<a
class="btn btn-default btn-sm pull-right"
[routerLink]="['/destination', _destination.placeId]">
Edit (LINK)
</a>
app.module.ts - routes
RouterModule.forRoot([
{ path: '', component: HomeComponent, pathMatch: 'full' },
{ path: 'destination/:id', component: EditDestinationComponent }
], { enableTracing: true })
navigation trigger
<button
class="btn btn-default btn-sm pull-right"
[routerLink]="['/destination', _destination.placeId]">
Edit...
</button>
edit-destination.component.ts
@Component({
selector: 'app-edit-destination',
templateUrl: './edit-destination.component.html',
styleUrls: ['./edit-destination.component.css']
})
export class EditDestinationComponent implements OnInit {
constructor(
private route: ActivatedRoute
) { }
ngOnInit() {
console.log('loaded edit-destination');
this.route.paramMap
.pipe(
tap((params: ParamMap) => console.log(`destination: ${params.get('id')}`))
)
.subscribe();
}
}
edit-destination.component.html
<p>
edit-destination works!
</p>
Upvotes: 4
Views: 2272
Reputation: 91
In my case, I was using a form tag in the markup, so I figured it was triggering a "form post" when the user clicked the button. Adding return false; at the last line of code of the click event solved the problem.
Upvotes: 9