要在Angular中访问组件路由,可以使用Angular的内置路由器模块来实现。下面是一个使用Angular路由器访问组件路由的解决方法的示例代码:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppModule { }
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-home',
template: `
`
})
export class HomeComponent {
constructor(private router: Router) {}
goToAbout() {
this.router.navigate(['/about']);
}
goToContact() {
this.router.navigate(['/contact']);
}
}
在上面的示例中,我们在HomeComponent组件中注入了Router模块,并使用navigate()方法将路由路径作为参数传递,以便导航到AboutComponent和ContactComponent组件。通过点击按钮,我们可以在HomeComponent组件中访问组件路由。
上一篇:Angular访问列表属性
下一篇:Angular防止多次调用服务