angular-* ng如果条件是基于url参数

Question

How can I show an element only if there are certain queryParams added to the url?

eg

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

And I want to do something like:

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

Answer 1

You need to assign specific query param into a property and then use that property in the condition *ngIf .

queryParam;

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

In the markup

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

Answer 2

in .ts file

private queryParams:string ='';

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

    });
}

**For "PARAMETER_NAME" you can mention the name of the query parameter. For example if route is "/userId"

this.queryParams= params['userId'];

in .html file

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

**For "QUERY_NAME" you can mention the intended query parameter string. For example if intended string is "userName"

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