how to use routerlink in angular?

I’m new in Angular but I came from various frameworks that are relevant to the Backend such as Django, I note that Angular has the same nature as Django routing a bit regardless that it belongs to client-side so, so I’m familiar with routing confused around how Angular handles routing and use router-link in the template in Angular.

there is my problem:

export const routes: Routes = [
  {path: 'login', component: LoginComponent, outlet: "login"},
  {path: 'signup', component: RegisterComponent, outlet: "register"},
]

when I’m trying to move to the login page by the following statement:

<a [routerLink]="['', {outlets: {login: ['login']}}]" ariaCurrentWhenActive="page" routerLinkActive="active">Signin?</a>

what is happening is that the link looks like this link when it displaying it in the inspect element:

/app/(login:login//register:signup)

my current page is /app/(register:signup) and all I want to do is to move to: /app/(login:login)

first of all, I want to know how to move to my target.
second: I want to understand the router link nature in angular and how it works if it is possible.