在 angular 7 中获取路由参数为 null

Question

我无法将路由参数检索为 null。我正在使用 angular7。请在下面找到代码

Header组件ts文件

    import {Router, ActivatedRoute} from '@angular/router';
    constructor(private httpService: HttpClient, private router: Router, private activatedRoute: ActivatedRoute) {
             this.getNewsSelectedFromRouteParam();
        }
    getNewsSelectedFromRouteParam() {
            alert();
            let id = this.activatedRoute.snapshot.paramMap.get('typeId');
            alert(id);
        }
getNewsByCountry(newsTypeSelected: any) {
        this.router.navigate(['/news',newsTypeSelected]);
        this.getNewsSelectedFromRouteParam();
    }

Header html

<div class=" dropdown-toggle" data-toggle="dropdown">
                XXX
            </div>
            <div class="dropdown-menu">
                <div *ngFor="let cr of country" class="dropdown-item"
                    (click)="getNewsByCountry(cr.value)" >{{cr.name}}</div>
            </div>

app路由ts文件

 const routes: Routes = [
        { path: 'news/:typeId', component: XxxComponent },
    { path: '**', component: XxxComponent }
    ];

Answer 1

你在(click)中调用getNewsByCountry，可能cr.value为null，什么是cr.value？是身份证吗？

Answer 2

有两种方法可以访问路由参数。

静态（页面加载一次）
动态地（如果在您的应用程序中更改了参数而无需通过浏览器重新加载页面，则会更新）

您可以在这里获得更多参考：https://angular.io/api/router/ActivatedRouteSnapshot

请参阅以下代码段以了解实施情况：

let id = this.activatedRoute.snapshot.params.typeId; // any param name after "params"

或

this.activatedRoute.params.subscribe((params) => {
    let id = params.get('typeId');
});

Make sure you are using above code when component is initialized i.e. in or after ngOnInit().

Answer 3

我试图在 "HeaderComponent ts" 中获取它应该从 "XxxComponent" 调用的那个参数。我在 XxxComponent ts 文件中添加了路由参数代码，现在可以正常工作了。我能够获取路由参数。

Answer 4

你也可以试试

let id = this.activatedRoute.snapshot.queryParams.id

获取所有路由共享的查询参数

在 angular 7 中获取路由参数为 null

Getting route param as null in angular 7

angular-routing

routeparams

angular

angular7