要在Angular 7的AppComponent中访问参数,可以使用Angular的路由功能和ActivatedRoute服务。以下是一个示例:
在app.module.ts文件中导入以下模块和服务:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
RouterModule.forRoot([
{ path: 'example/:id', component: AppComponent } // 路由定义
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
在app.component.ts文件中导入以下模块和服务:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
id: string; // 参数变量
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.params.subscribe(params => {
this.id = params['id']; // 获取参数值
});
}
}
在app.component.html文件中可以使用id参数:
参数值: {{ id }}
在应用中,可以通过访问http://localhost:4200/example/123
来传递参数,其中123是参数值。在AppComponent中,通过ActivatedRoute服务的params属性可以访问到该参数值,并在HTML模板中显示出来。
这是一个简单的示例,你可以根据自己的需求进行修改和扩展。