在角度 7 中获取路由参数为空答案

【问题标题】：Getting route param as null in angular 7在角度 7 中获取路由参数为空
【发布时间】：2019-01-22 13:07:40
【问题描述】：

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

HeaderComponent 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();
    }

标题 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>

应用路由 ts 文件

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

【问题讨论】：

检索为 null 是什么意思？
而不是根参数值变为空，但我能够看到 url 的变化。
由于您正在获取快照值，因此它不会动态更改。您必须订阅才能更改 typeId 值
您的主 app.html 中有吗？我曾经忘记使用它，我找不到我没有得到参数的原因。
@Talg123 你为我节省了几个小时！谢谢

标签： angular angular-routing angular7 routeparams

【解决方案1】：

访问路由参数有两种方式。

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

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

具体实现见以下sn-p：

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

或

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

确保在组件初始化时使用上述代码，即在 ngOnInit() 中或之后。

【讨论】：

我的 id 为"undefined"。我记录了参数，它显示为空 JSON。关于为什么它变空的任何想法？
你应该在 ngOnInit() 中调用它

【解决方案2】：

我试图在“HeaderComponent ts”中获取应该从“XxxComponent”调用的参数。我在 XxxComponent ts 文件中添加了该路由参数代码，现在可以按预期工作。我能够获得路线参数。

【讨论】：

你能详细说明你做了什么吗？路由在子组件中不可访问，还是？
在 StackOverFlow 上找到很多答案后，这个答案是唯一解决我的问题

【解决方案3】：

你也可以试试

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

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

【讨论】：

【解决方案4】：

你在（点击）中调用getNewsByCountry，可能cr.value为null，cr.value是什么？是身份证吗？

【讨论】：