Question

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

log-in.component.html

<p>it works</p>

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

Answer 1

我认为这会起作用。

这是您的解决方案：

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

另一种方法是：

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

添加您的组件：

<router-outlet></router-outlet>

Answer 2

关于您的代码，我有些遗漏了。首先，app.routing.module需要导入并在app.module.ts中注册：

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>

然后Kishan Patel建议的两个选项都应该起作用。

单击按钮即可将一个组件的角度移动到另一个组件

2 个答案: