typescript 如何用url get参数隐藏元素？

epggiuax 于 2023-01-18 发布在 TypeScript

关注(0)|答案(1)|浏览(102)

我有一个使用Typescript在Angular 13中编写的应用程序。
我想用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'];

我只是想缓存HTML元素后面的参数在URL中获得.
例如

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

超文本标记语言侧

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

typescript

来源：https://stackoverflow.com/questions/75136526/how-hide-element-with-url-get-parameter

1条答案

按热度按时间

eh57zj3b1#

试试这个：

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>

赞(0）回复(0）举报 2023-01-18

我来回答

typescript 如何用url get参数隐藏元素？

1条答案

相关问题

热门标签

最新问答