单击同一组件的不同按钮时的不同路线答案

【问题标题】：Different routes on clicking different buttons from the same component单击同一组件的不同按钮时的不同路线
【发布时间】：2021-02-07 12:14:07
【问题描述】：

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

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>

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

app.component.html

&lt;signin&gt;&lt;/signin&gt;

app-routing.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 { }

【问题讨论】：

你的app组件有没有router outlet组件
app.component.html 只有登录组件的选择器 ()。 app.module.ts 在导入中有应用路由模块。
正如@HitechHitesh 所说，您需要在app.component 中使用<router-outlet></router-outlet> 标签而不是signin。它说明了放置已创建组件的角度。如果您想默认显示登录，请将 { path: "", redirectTo: "/signin", pathMatch: 'full'}, 添加到您的路线中。这是一篇关于路由如何工作的法语但很好的文章：wetry.tech/les-secrets-du-router-d-angular

标签： angular

【解决方案1】：

在登录组件/应用程序组件的构造函数中注入路由器

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

  constructor(private router: Router)

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

【讨论】：

没有登录验证。我只是在检查我是否能够从同一个组件移动到不同的组件。我已经导入了提到的模块。请您详细说明如何使用 this.router.navigate 命令。
您是否使用 ng g c 使用 Angular CLI 生成了 Markets 组件？如果没有，您是否在 App Module 中声明了 Markets 组件？您也可以尝试使用 <button type="button" class="btn btn-primary" [routerLink]="['../markets']">Sign in</button> 而不使用 .. 像这样 <button type="button" class="btn btn-primary" [routerLink]="['/markets']">Sign in</button>

【解决方案2】：

首先，您的应用程序路由结构有些不匹配，但是，我根据您的要求做了一个简单的路由，请查看下面的链接

https://stackblitz.com/edit/angular-ahleui?embed=1&file=src/index.html

【讨论】：