是的,Angular 7可以通过其路由来获取组件。以下是一个示例解决方案,包含了相关的代码:
npm install @angular/router
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-home',
template: 'Home Component
'
})
export class HomeComponent implements OnInit {
constructor(private route: ActivatedRoute) { }
ngOnInit() {
console.log(this.route.component);
}
}
在上面的示例中,我们在HomeComponent中使用了ActivatedRoute,通过依赖注入的方式获取当前路由的组件。然后,我们在ngOnInit方法中打印出当前的组件。
这就是使用Angular 7通过其路由获取组件的解决方法。请注意,以上示例仅供参考,你可以根据自己的需求进行修改和扩展。