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，但是仍然是同样的问题。有人知道该如何解决吗？感谢您的帮助

Answer 1

您的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>

为page-widgets.component / module添加相同的内容。

另外，您可以将goTo（）Fn提取到单独的服务，即

角路由不重定向到组件

1 个答案: