首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在同一组件中点击不同按钮的不同路径

在同一组件中点击不同按钮的不同路径
EN

Stack Overflow用户
提问于 2020-10-25 02:38:12
回答 2查看 73关注 0票数 3

我在我的angular应用程序中有3个组件- signin,markets和register。登录组件是我的平台组件。我在登录页面上有两个按钮--登录和注册。单击登录按钮将把我带到市场组件,单击注册按钮将把我带到注册组件。我可以在单击sign up后导航到注册组件,但在单击sign in后无法导航到markets组件。URL更改为localhost:4200/market,但未加载markets组件。登录组件保持原样。控制台中没有错误。组件的代码段已附加。

signin.component.html

代码语言:javascript
运行
复制
<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>

register.component.html

代码语言:javascript
运行
复制
<button type="button" class="btn btn-primary" [routerLink]="['../signin']">Register</button>
<router-outlet></router-outlet>

app.component.html

代码语言:javascript
运行
复制
<signin></signin>

app-routing.module.ts

代码语言:javascript
运行
复制
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 { }

EN

回答 2

Stack Overflow用户

发布于 2020-10-25 02:50:07

在login组件/app组件中,在构造函数中注入路由器

代码语言:javascript
运行
复制
// import { ActivatedRoute, Router } from '@angular/router';

  constructor(private router: Router)

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

票数 0
EN

Stack Overflow用户

发布于 2020-10-25 05:04:28

首先你的申请路由结构有一些不匹配,但是,我根据你的要求做了一个简单的路由,请检查下面的链接

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64516792

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档