如何隐藏元素与url获取参数?

Question

我有一个用Angular 13用Typescript写的应用。

我想用get url参数隐藏项目，如果它不存在，则将其设置为true。

export class AppComponent {
menu: boolean = true;
constructor(private oauthService: InitialAuthService, private userRoleService: UserRoleService, private route: ActivatedRoute,) {
}
ngOnInit(): void {
this.route.queryParams
.subscribe((params: any) => {
this.menu = !!params["menu"] ? params["menu"] : true
}
);
this.menu = this.route.snapshot.queryParams['menu'];

我只是想缓存在URL中获得的HTML元素以下参数。

例如

http://localhost:4200/index?menu=false   // hide menu 
http://localhost:4200/index?menu=true    // show menu 
http://localhost:4200/index              // show menu 

html

<div *ngIf="menu">...</div>

Answer 1

试试这个:

export class AppComponent implements OnInit {
isShown$!: Observable<boolean>;
constructor(private _route: ActivatedRoute) {}
ngOnInit(): void {
this._handleRouteQueryParams();    
}
private _handleRouteQueryParams(): void {
this.isShown$ = this.route
.queryParamMap
.pipe(map(params => {
return !params.has('menu') || params.get('menu') === 'true';
}));
}
}

模板

<div *ngIf="isShown$ | async">...</div>