角度布线，不重定向到组件

Question

我对角度布线有问题，我想在单击按钮“验证”时导航到组件页面WidgetsComponent

component.html：

<div class="form-group">
  <button mat-raised-button color="primary" class="btn btn-success btn-lg btn-block" type="submit" 
  (click)= "OnSubmit()" [mat-dialog-close]="true">Validate</button>
  <button mat-raised-button color="primary" class="btn btn-success btn-lg btn-block"  [mat-dialog- 
  close]="true">Close</button>
</div> 

组件。ts:

 OnSubmit(){
   this.router.navigate(['/widgets'])
  }

The app-routing.module.ts：

const appRoutes: Routes = [
  { path: 'widgets', component: PageWidgetsComponent }
  ];
@NgModule({
imports: [
  RouterModule.forRoot(appRoutes)
],
exports: [RouterModule] })
export class AppRoutingModule {}

当我点击验证按钮时，没有任何反应，我没有得到我想要的html页面，但网址更改为 http://localhost:4200/widgets。我也尝试了路由器链接，但它仍然是同样的问题。有人知道如何解决这个问题吗？感谢您的帮助

Answer 1

您的 AppComponent 中是否有路由器插座标签？

我准备了一场小型闪电战。希望有帮助。

https://stackblitz.com/edit/angular-ivy-gbif2p?file=src/app/pages/page-widgets/page-widgets.component.html

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { PageWidgetsComponent } from "./pages/page-widgets/page-widgets.component";
import { PageHomeComponent } from "./pages/page-home/page-home.component";

const appRoutes: Routes = [
  { path: "", component: PageHomeComponent },
  { path: "widgets", component: PageWidgetsComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})

export class AppRoutingModule {}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { PageWidgetsComponent } from './pages/page-widgets/page-widgets.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports:      [ BrowserModule, FormsModule, RouterModule, AppRoutingModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from "@angular/router";
import { PageHomeComponent } from './page-home.component';

const appRoutes: Routes = [
  { path: "", component: PageHomeComponent }
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forChild(appRoutes)
  ],
  exports: [RouterModule]
})
export class PageHomeRoutingModule { }

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-page-home',
  templateUrl: './page-home.component.html',
  styleUrls: ['./page-home.component.css']
})

export class PageHomeComponent implements OnInit {

  constructor(
    private router: Router
  ) { }

  ngOnInit() {
  }

  goTo(url: string){
   this.router.navigate([url]);
  }
}

page-home.component.html

<button mat-raised-button color="primary" class="btn btn-success btn-lg btn-block" type="submit" 
  (click)= "goTo('/widgets')">Go To Widgets</button>

加上页面小部件.组件/模块也是如此。