angular

Question

如何仅在 url 中添加了某些 queryParams 时才显示元素？

例如

ngOnInit() {
    this.route.queryParams.subscribe(params => {
        console.log(params);
    });
}

我想做类似的事情：

<div *ngIf="queryParams = 'query_name'"></div>

Answer 1

您需要将特定查询参数分配给属性，然后在条件 *ngIf.

中使用该属性

queryParam;

ngOnInit() {
    this.route.queryParams.subscribe(params => {
        this.queryParam = params['yourParamName'];
    });
}

在标记中

<div *ngIf="queryParam == 'yourCondition'"></div>

Answer 2

在 .ts 文件中

private queryParams:string ='';

ngOnInit() {
    this.route.queryParams.subscribe(params => {
        this.queryParams= params['PARAMETER_NAME'];

    });
}

**对于 "PARAMETER_NAME"，您可以提及查询参数的名称。例如，如果路由是“/userId”

this.queryParams= params['userId'];

在 .html 文件中

<div *ngIf="queryParams.toLowerCase() === 'QUERY_NAME'.toLowerCase()"></div>

**对于 "QUERY_NAME"，您可以提及预期的查询参数字符串。例如，如果预期的字符串是 "userName"

 <div *ngIf="queryParams.toLowerCase() === 'userName'.toLowerCase()"></div>

angular - *ngIf 条件基于 url 参数

angular - *ngIf conditional based on url params

typescript

angular-template