角路由不重定向到组件

Question

我在角度布线时遇到问题，当我单击“验证”按钮时，我想导航到组件PageWidgetsComponent。

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> 
component.ts：

 OnSubmit(){
   this.router.navigate(['/widgets'])
  }
app-routing.module.ts：

const appRoutes: Routes = [
  { path: 'widgets', component: PageWidgetsComponent }
  ];
@NgModule({
imports: [
  RouterModule.forRoot(appRoutes)
],
exports: [RouterModule] })
export class AppRoutingModule {}
当我单击验证按钮时，没有任何反应，我没有得到想要的HTML页面，但URL更改为http://localhost:4200/widgets。我也尝试过routerlink，但是仍然是同样的问题。有人知道该如何解决吗？感谢您的帮助

我在角度布线时遇到问题，当我单击按钮“ validate”时，我想导航到组件PageWidgetsComponent。component.html：

]]]]]

您的AppComponent中是否有router-outlet标签？

我准备了一个小的Stackblitz。希望能帮助到你。

https://stackblitz.com/edit/angular-ivy-gbif2p?file=src%2Fapp%2Fpages%2Fpage-widgets%2Fpage-widgets.component.html

app-routing.module.ts

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 { }
page-home-routing.module.ts
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 { }
page-home.component.ts
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>

Answer 1

您的AppComponent中是否有router-outlet标签？

我准备了一个小的Stackblitz。希望能帮助到你。