如果在Angular 13中使用路由时遇到了此问题,则可能是因为返回的值为Observable而不是对象,因此无法提取属性。要解决此问题,可以尝试在Observable中使用管道运算符(pipe operators),以便在返回的结果中提取所需的属性。
以下是一个示例代码,其中使用了管道运算符解决此问题:
import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators';
@Component({ selector: 'app-my-component', templateUrl: './my-component.component.html', styleUrls: ['./my-component.component.css'] }) export class MyComponentComponent implements OnInit {
constructor(private router: Router) { }
ngOnInit() { this.getData().pipe( map(data => data.property) ).subscribe(property => { console.log(property); this.router.navigate(['other-route', property]); }); }
getData(): Observable<{property: string}> { // some data fetching logic that returns an observable return fetch('https://example.com/data').then(response => response.json()); }
}
在该示例代码中,我们使用了map操作符来提取Observable返回数据中的“property”属性。然后,我们订阅该Observable并在获取数据后导航到其他路由,包括提取的属性值作为参数。