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

【问题标题】：How to route a child component to another child component如何将一个子组件路由到另一个子组件
【发布时间】：2019-08-23 11:53:09
【问题描述】：

我的项目中有两个子组件 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 { }

请帮忙

【问题讨论】：

刚刚阅读了 Angular 文档中的路由，您可以在组件中注入 Router 服务并使用 navigateTo() 方法，您也可以在视图中使用 routerLink 指令来满足您的要求
我已经在使用 routerLink 但不工作，谢谢

标签： angular routing components

【解决方案1】：

您可以尝试这样做。

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>

【讨论】：

谢谢我添加了这个构造函数(private route:ActivatedRoute,private router:Router) { } navigateToChild(){ this.router.navigate(['./pikachu'], { relativeTo: this.路由器});但是私有路由器有问题：路由器，他找不到路由器
尝试在导入中添加import { ActivatedRoute, Router } from '@angular/router';
@sr123 如果对您有帮助，请点赞并标记我的回答。

【解决方案2】：

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

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

【讨论】：

@sr123 你能发布一个包含你所有代码的 stackblitz 链接吗？