Angular 在按钮单击时从一个组件移动到另一个组件答案

【问题标题】：Angular moving from one component to another on button clickAngular 在按钮单击时从一个组件移动到另一个组件
【发布时间】：2020-07-18 01:02:22
【问题描述】：

我想在单击按钮时从一个角度组件导航到另一个。我有两个组件 app 和 login。单击 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() {}  
}

<p>it works</p>

在按钮上单击 URL 更改为 /login。但是我仍然看到按钮 UI 并且它不起作用。任何帮助将不胜感激！在此先感谢。

【问题讨论】：

标签： html angular bootstrap-4

【解决方案1】：

我认为这会起作用。

这是您的解决方案：

onSubmit() {  
     this.router.navigateByUrl('/login');
}

另一种方式是：

<button class="nav-item" [routerLink]="['/login']"> Login </button>

添加你的组件：

<router-outlet></router-outlet>

【讨论】：

这两个解决方案都不起作用。我还缺少其他东西吗？@Kishan Patel
你能把你的代码放在任何支持打字稿的编辑器中，这样我就可以检查错误和所有内容。很容易理解
请更改 onSubmit() 调用函数。在 onInit() 之后调用
我将添加到 app.compoent.html。登录页面现在正在加载，但它位于应用组件 html 下方。
酷！是的，这是必需的

【解决方案2】：

我想念您的代码的一些内容。一、app.routing.module需要在app.module.ts中导入注册：

import { AppRoutingModule } from './app-routing.module';

  imports: [
    BrowserModule,
    AppRoutingModule,
    ...
 ]

另一方面，我没有看到路由器插座：

<router-outlet></router-outlet>

我建议你使用 app 组件 (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>

那么 Kishan Patel 建议的两个选项都应该有效。

【讨论】：

@Fab2 非常感谢。会试一试的！