Angular 2+，通过路由器重定向到另一个组件的 html 不起作用

Question

我是 Angular 2+ 的新手，我无法通过路由解决此问题。

到目前为止，我在 app.module.ts 文件中导入了 import { RouterModule, Routes } from '@angular/router';。

在 imports 部分添加了 RouterModule.forRoot(appRoutes)。

在我的主要组件的构造函数中添加 private router: Router（主要组件 -> 我想从中路由到不同的组件）

并在我的主要组件文件中添加了按钮和功能以路由到不同的组件：

测试-list.component.html:

<table class="table table-dark table-hover">
    <thead>
        <tr>
            <th scope="col">First Name</th>
            <th scope="col">Last Name</th>
        </tr>
    </thead>
    <tbody *ngFor="let item of tests">
        <td>{{item.firstName}}</td>
        <td>{{item.lastName}}</td>
    </tbody>
</table>
<button routerLink="/home" class="btn btn-primary" (click)="goToForm()">Page Name</button>
<router-outlet></router-outlet>

测试-list.component.ts:

import { Component, OnInit } from '@angular/core';
import { TestService } from 'src/app/services/test.service';
import { Test } from 'src/app/common/test';
import { Router } from '@angular/router'


@Component({
  selector: 'app-test-list',
  templateUrl: './test-list.component.html',
  styleUrls: ['./test-list.component.css']
})
export class TestListComponent implements OnInit {

  tests: Test[];

  constructor(private productService: TestService,private router: Router) { }

  ngOnInit() {
    this.getTests();
  }


  getTests(){
    this.productService.getList().subscribe(
      data => {
        this.tests = data;
        console.log(data);
      }
    );
  }

  goToForm(){
    this.router.navigate(['/home']);
  }

应用Module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { TestService } from './services/test.service';
import { TestListComponent } from './components/product-list/test-list.component';
import { RouterModule, Routes } from '@angular/router';
import { SecondTestComponent } from './components/second-test-component/second-test.component';

    const appRoutes: Routes = [
  { path: 'home', component: SecondTestComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    TestListComponent,
    SecondTestComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [TestService],
  bootstrap: [AppComponent]
})
export class AppModule { }

second-test.component.html（我想点击按钮打开这个页面）：

<h1> HI ! </h1>

当我单击该按钮时，它会在 html 代码下方显示第二个组件的内容，而不是打开第二个组件的页面。（我想完全关闭第一个组件并打开第二个组件的html）

Answer 1

要在 Angular 中进行路由，您需要一个包含 router-outlet 的路由父组件。例如，这可能是 app.component.ts.

在你想要显示路由内容的地方包括路由器出口。

<router-outlet></router-outlet>

路线定义正确，但只有在有多条路线时才有意义。目前您已经定义了路由 /home 来显示 SecondTestComponent 的内容。如果您定位到另一条路线，则不会显示任何内容。在另一条路线上添加另一个要显示的组件，而不是 SecondTestComponent。等同于home路由配置。

从您的组件模板中，您可以像在第一个代码段中那样通过 routerLink 进行导航。但是此 routerLink 指向您尚未配置的页面 /secondTest（我猜您的意思是 /home）。

<button routerLink="/home">Navigate</button>

除了 routerLink 属性之外，您不需要处理 (click) 事件。一般提示：您可以编写路由，例如，如果您提交一个路径元素数组，则可以路由到一个 id。

<button [routerLink]="['/books', id]"></button>

Angular 2+，通过路由器重定向到另一个组件的 html 不起作用

Angular 2+ , redirecting to another component's html via Router doesn't work

router

angular