Question

我是Angular 2+的新手，但我无法使用“路由”解决此问题。

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

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

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

并将按钮和功能添加到我主要组件的文件中，以路由到其他组件：

test-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>

test-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']);
  }

App 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

尝试更改应用模块的路由路径-

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

您可以在代码中删除点击功能，可以使用HTML中的function或routerlink。

Answer 2

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

在要显示路由内容的位置包括路由器出口。

<router-outlet></router-outlet>

正确定义了路由，尽管只有一条以上的路由才有意义。当前，您已经定义了路由/home以显示 SecondTestComponent 的内容。如果定位到其他路线，则不会显示任何内容。添加另一个要显示的组件，而不是在另一条路线上的SecondTestComponent。将其等效配置为本地路由。

然后，您可以像第一个代码片段一样，通过routerLink浏览组件模板。但是此routerLink定位到您尚未配置的页面/secondTest（我想您的意思是/home）。

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

除了(click)属性外，您不需要处理routerLink事件。常规提示：如果您提交路径元素数组，则可以撰写路线，例如到达id的路线。

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

Angular 2+，无法通过Router重定向到另一个组件的html

2 个答案: