Angular 2 router navigate, goes to page and comes back

Question

I have 2 components: ProductList Product

When I click on a product in product list, it should go to product component.

ProductList, unselect of product HTML:

 <p><a href="#" class="btn btn-primary" role="button" (click)="onSelect(item)">Learn more</a></p>

TS:

onSelect(product: IProduct) {
    this.router.navigate(['/product', product.productId]);
  }

It does go to product Component and consoles the id:

constructor(private _route: ActivatedRoute) 
    {
        this._route.params.subscribe(
            params => {
                let id = params['id'];
                console.log(id)
            });
     }

But then it navigates back the product list component why?\

Whereas if i do go from HTML that is use routerLink: It works...

[routerLink]="['/product',item.productId]"

Why?

Answer 1

Remove the href="#" from your link.