Question

我在项目google中有两个子组件dpikachu。

我需要将google页面（当我单击旁边的按钮时）路由到另一个子组件pikachu。

这是我的app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { PikachuComponent } from './pikachu/pikachu.component';
import { GoogleComponent } from './google/google.component';
import {HomeComponent} from './home/home.component';

const routes: Routes = [
  { path: 'google', component: GoogleComponent },
  { path: 'pikachu', component: PikachuComponent  },
  {path: '', component: HomeComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这是我的app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PikachuComponent } from './pikachu/pikachu.component';
import { GoogleComponent } from './google/google.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    PikachuComponent,
    GoogleComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

请帮忙

Answer 1

您是否已将AppRoutingModule导入添加到app.module.ts中？

@NgModule({ imports: [ BrowserModule, FormsModule, AppRoutingModule ],

Answer 2

您可以尝试这样做。

import { ActivatedRoute, Router  } from '@angular/router';

constructor(private route: ActivatedRoute, private router: Router) {}

navigateToChild(){
   this.router.navigate(['./pikachu'], { relativeTo: this.route });
}

然后

 <a target="_blank" rel="noopener" (click)="navigateToChild()"> <button class="btn-primary">Next</button></a>

如何将子组件路由到另一个子组件

2 个答案: