要从一个Angular 7组件导航到另一个组件,你可以使用Angular的内置路由器。以下是一个完整的示例,展示了如何实现组件之间的导航。
首先,确保你已经正确设置了路由器并定义了所有需要导航的组件。你可以在app.module.ts文件中设置路由器,并在app-routing.module.ts文件中定义路由。
在app.module.ts文件中设置路由器:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { OtherComponent } from './other/other.component';
const appRoutes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'other', component: OtherComponent },
];
@NgModule({
declarations: [
AppComponent,
HomeComponent,
OtherComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
在app-routing.module.ts文件中定义路由:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { OtherComponent } from './other/other.component';
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'other', component: OtherComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' } // 默认导航到home组件
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
现在,你可以在组件中使用路由器导航到其他组件。在需要触发导航的组件中,导入Router类,并使用navigate方法导航到目标组件。
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-home',
template: `
Welcome to Home Component!
`,
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor(private router: Router) { }
ngOnInit() {
}
goToOther() {
this.router.navigate(['/other']);
}
}
在上面的示例中,我们在HomeComponent中使用了一个按钮,并通过调用goToOther方法来触发导航到OtherComponent。在goToOther方法中,我们使用router.navigate方法,并传入目标组件的路径作为参数。
现在,当你点击Home组件中的按钮时,将会导航到Other组件。