在Angular 8中,您可以使用路由器进行数据传递。下面是一个示例解决方案:
首先,您需要在定义路由时添加一个数据对象。在路由模块的定义中,您可以添加一个数据属性并将其设置为您想要传递的值,如下所示:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MyComponent } from './my.component';
const routes: Routes = [
{ path: 'my-component', component: MyComponent, data: { message: 'Hello from route data!' } }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在上面的示例中,我们在data
属性中设置了一个名为message
的值。
然后,在您的组件中,您可以通过ActivatedRoute服务来访问传递的数据。在组件类中注入ActivatedRoute,并使用data
属性来获取传递的值,如下所示:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-my-component',
templateUrl: './my.component.html',
styleUrls: ['./my.component.css']
})
export class MyComponent implements OnInit {
message: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.message = this.route.snapshot.data['message'];
}
}
在上面的示例中,我们注入了ActivatedRoute,并在ngOnInit生命周期钩子中获取传递的数据。我们使用this.route.snapshot.data
来获取快照中的数据,并将其赋值给组件的message
属性。
最后,在组件的模板中,您可以使用message
属性来显示传递的数据,如下所示:
{{ message }}
这样,当您导航到/my-component
路径时,将在组件中显示“Hello from route data!”。