在单击按钮时从一个组件角度移动到另一个组件
提问于 2020-04-06 04:17:46
我想通过单击按钮从一个角度组件导航到另一个角度组件。我有两个组件app和login.On，单击app.component.html中的一个按钮，我想导航到login.component.html。这就是我尝试过的。虽然URL正在更改，但我看不到页面的html内容。
app.component.html
<div class="row">
<div class="col-xs-9"></div>
<div class="col-xs-3">
<input type="button" class="btn btn-primary pull-right" (click)="onSubmit()" value="Next">
</div>
</div>app.routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LogInComponent } from './components/log-in/log-in.component';
const routes: Routes = [{ path: 'login', component: LogInComponent }];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }app.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private router: Router, ) {}
onSubmit() {
this.router.navigate(['/login'])
}
ngOnInit() {}
}log-in.component.html
<p>it works</p>在按钮上，单击网址更改为/login。但是，我仍然看到按钮UI，但它不工作。任何帮助都将不胜感激！！提前感谢！
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-04-06 04:31:53
我想这会起作用的。
以下是您的解决方案：
onSubmit() {
this.router.navigateByUrl('/login');
} 另一种方式是：
<button class="nav-item" [routerLink]="['/login']"> Login </button>在您的组件中添加：
<router-outlet></router-outlet>Stack Overflow用户
发布于 2020-04-06 10:30:46
我很怀念你的代码中的一些东西。首先，需要在app.module.ts中导入和注册app.routing.module：
import { AppRoutingModule } from './app-routing.module';
imports: [
BrowserModule,
AppRoutingModule,
...
]另一方面，我没有看到路由器插座：
<router-outlet></router-outlet>我建议您使用应用程序组件(app.componet.html)，如下所示：
<app-navbar></app-navbar> // if you use one
<router-outlet></router-outlet> // this is where the routing happens在index.html中，您可以像这样引用app.component：
<body>
<app-root></app-root>
</body>然后，基山·帕特尔建议的两个选项都应该有效。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61052889
复制相关文章
腾讯云开发者
