Angular的路由器的数据属性可以通过URL传递。在Angular中,我们可以通过路由参数来传递数据属性。
下面是一个示例,展示了如何在路由器中定义并传递数据属性:
在app.module.ts中,导入RouterModule和Routes模块,并定义一个路由数组。在这个示例中,我们定义了一个名为"example"的路由,它带有一个名为"id"的参数:
import { RouterModule, Routes } from '@angular/router';
import { ExampleComponent } from './example/example.component';
const routes: Routes = [
{ path: 'example/:id', component: ExampleComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在example.component.ts中,我们可以使用ActivatedRoute服务来获取路由参数。在这个示例中,我们使用subscribe方法来订阅路由参数的变化,并将其赋值给组件中的id属性:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
id: string;
constructor(private route: ActivatedRoute) { }
ngOnInit(): void {
this.route.params.subscribe(params => {
this.id = params['id'];
});
}
}
在example.component.html中,我们可以通过插值表达式将id属性的值显示在模板中:
Id: {{ id }}
这样,当我们访问/example/123时,路由器会将123作为参数传递给example组件,并显示在模板中。
希望这个示例可以帮助你理解如何在Angular的路由器中通过URL传递数据属性。