angular - 单击同一组件的不同按钮时的不同路由

Question

我的 Angular 应用程序中有 3 个组件 - 登录、市场和注册。登录组件是我的登陆组件。我在登录页面上有两个按钮 - 登录和注册。单击登录按钮应将我带到市场组件，单击注册按钮应将我带到注册组件。单击注册后我可以导航到注册组件，但是单击登录后我无法导航到市场组件。URL 更改为 localhost:4200/markets，但市场组件未加载。登录组件保持原样。控制台中没有错误。附上组件的片段。

signin.component.html

<button type="button" class="btn btn-primary" [routerLink]="['../markets']">Sign in</button>
<button type="button" class="btn btn-secondary" [routerLink]="['../register']">Sign Up</button>
<router-outlet></router-outlet>

注册.component.html

<button type="button" class="btn btn-primary" [routerLink]="['../signin']">Register</button>
<router-outlet></router-outlet>

app.component.html

<signin></signin>

应用路由.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SigninComponent } from './signin/signin.component';
import { RegisterComponent } from './register/register.component';
import { MarketsComponent } from './markets/markets.component';

const routes: Routes = [
  { path: "signin", component: SigninComponent},
  { path: "register", component: RegisterComponent},
  { path: "markets", component: MarketsComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

在登录组件/应用组件中，在构造函数中注入(inject)路由器

// import { ActivatedRoute, Router } from '@angular/router';

  constructor(private router: Router)

登录方法login()在登录成功时包含命令this.router.navigate。