angular - Angular In-App-Navigation with routerlink doesn't work as planned

Question

I have created a <nav mat-tab-nav-bar like this:

<nav mat-tab-nav-bar>

  <a mat-tab-link routerLink="">Product Shop</a>
  <a mat-tab-link routerLink="Login">User Login</a>
  <a mat-tab-link routerLink="Registration">User Registration</a>

</nav>

I can switch between the Tabs and the router link works!

In the registration tab I created a button which should navigate to the login, but it doesn't work

 <button  routerLink="Login" mat-button color="primary" type="submit">
        Log in
  </button>

When I click on it I stay in the registration route.

The button isn't the problem because when I add the same button in Product shop (Home-Tab --> routerlink= "") it goes to the login tab. But if I'm in another tab than home the button doesn't work anymore. so I can go from "" to "registration" or "login" but cant go from "registration" to "login".

标签： angularroutesnavigation

Answer 1

I think your routerLink should refer to "Login". Currently you have set it to "Registration" which would, as you mention, redirect you to the same page.

So like this:

<button  routerLink="Login" mat-button color="primary" type="submit">
    register
</button>