当前位置：首页 > 软件库 > Web应用开发 > Web框架 >

bind-query-params

Sync URL Query Params with Angular Form Controls

授权协议 MIT License

开发语言 JavaScript

所属分类 Web应用开发、 Web框架

软件类型开源软件

地区不详

投递者通学真

操作系统跨平台

开源组织无

适用人群未知

软件概览

Sync URL Query Params with Angular Form Controls

The library provides a simple and reusable solution for binding URL query params to Angular Forms

Demo

Installation

npm install @ngneat/bind-query-params

Usage

Inject the BindQueryParamsFactory provider, pass an array of definitions and connect it to your form:

import { BindQueryParamsFactory } from '@ngneat/bind-query-params';

interface Filters {
  searchTerm: string;
  someBoolean: boolean;
}

@Component({
  template: `Your normal form setup`,
})
export class MyComponent {
  filters = new FormGroup({
    searchTerm: new FormControl(),
    someBoolean: new FormControl(false),
  });

  bindQueryParamsManager = this.factory
    .create<Filters>([
      { queryKey: 'searchTerm' },
      { queryKey: 'someBoolean', type: 'boolean' }
     ]).connect(this.filters);

  constructor(private factory: BindQueryParamsFactory) {}

  ngOnDestroy() {
    this.bindQueryParamsManager.destroy();
  }
}

With this setup, the manager will take care of two things:

Update the control's value when the page is loaded for the first time
Update the URL query parameter when the corresponding control value changes

QueryParam Definition

`queryKey`

The query parameter key

`path`

The form control path. If it is not specified, the manager assumes that the path is the queryKey. We can also pass nested keys, for example, person.name:

{ queryKey: 'name', path: 'person.name' }

`type`

Specify the control value type. Available options are:boolean, array, number, string and object.Before updating the control with the value, the manager will parse it based on the provided type.

`parser`

Provide a custom parser. For example, the default array parser converts the value to an array of strings. If we need it to be an array of numbers, we can pass the following parser:

const def = { parser: (value) => value.split(',').map((v) => +v) };

`serializer`

Provide a custom serializer. For example, supposing that we have a FormControl that carries a Date and we want to persist, in the query params, a custom value, such as a string Date, we can do something like the following serializer:

const def = { serializer: (value) => (value instanceof Date ? value.toISOString().slice(0, 10) : (value as string)) };

`strategy`

When working with async control values, for example, a dropdown list that its options come from the server, we cannot immediately update the control.

In this cases, we can provide the modelToUrl strategy, that will not update the control value when the page loads. When the data is available we can call the manager.syncDefs() method that'll update the controls based on the current query params:

@Component()
export class MyComponent {
  filters = new FormGroup({
    searchTerm: new FormControl(),
    users: new FormControl([]),
    someBoolean: new FormControl(false),
  });

  bindQueryParamsManager = this.factory
    .create<Filters>([
      { queryKey: 'searchTerm' },
      { queryKey: 'someBoolean', type: 'boolean' },
      { queryKey: 'users', type: 'array', strategy: 'modelToUrl' },
    ])
    .connect(this.filters);

  constructor(private factory: BindQueryParamsFactory) {}

  ngOnInit() {
    service.getUsers().subscribe((users) => {
      // Initalize the dropdown
      this.users = users;
      this.manager.syncDefs('users');
    });
  }

  ngOnDestroy() {
    this.bindQueryParamsManager.destroy();
  }
}

Note that syncDefs will always be called once under the hood.

Browser Support

The library uses the URLSearchParams API, which supported in any browser except IE.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Netanel Basal}

��

This project follows the all-contributors specification. Contributions of any kind welcome!

Icons made by Freepik from www.flaticon.com

使用案例

angular2/4 路由查询参数 queryParams

angular2 路由query参数，也就是？后面的参数，用来实现界面跳转，返回到原来界面保持查询条件，分页等效果 1、路由界面跳转，传递查询参数 queryParams对象 <a [routerLink]="['../bind-user']" [queryParams]='{qq: row.bind_qq_count, name: row.customer_name, state: row.s
Gin 笔记（04）— URLQuery参数处理、Bind URI、Bind POST 到指定结构体、POST 表单处理

1. URLQuery参数处理在 Gin 框架中下列方法可以用处理 URLQuery 参数： // 返回指定名字参数的值，c.Params.ByName(key) 简写， // 如： "/user/:id"，则返回 id := c.Param("id") id == "john" func (c *Context) Param(key string) string
mysql-Bind_param非对象错误

尝试为将跟踪每日视图的表插入初始行时,出现错误： Fatal error: Call to a member function bind_param() on a non-object in /…/functions.PHP on line 157 该行是以下组的最后一行： if($stats_found) { $sqlquery = "UPDATE vid_stats SET views = ?
如何在PHP中动态绑定mysqli bind_param参数？

我一直在学习为我的sql查询使用准备和绑定的语句,我已经出来了这个到目前为止,它的工作正常,但它是不是动态的,当涉及到多个参数或没有任何参数需要时, public function get_result($sql,$parameter) { # create a prepared statement $stmt = $this->mysqli->prepare($sql); # bind para
Vue 路由传参 params query

1.params 配置路由格式：/router/:id 传递方式：在path后面跟上对应的值传递后形成的路径：/router/123,/router/abc const routes=[ //路由配置页 { path:'/user/:userId', component:home } // 在app.vue写 <router-link :to="'/user/'+userId"
关于postgresql：PHP-bindValue()的PDO问题

我正在编写一个类，该类以编程方式创建给定某些列名称的表。我正在使用PDO准备好的语句，这似乎引起了一些问题。基本步骤如下： // create a query string to be sent to $pdo->prepare $sql = 'CREATE TEMP TABLE :tmp_table_name ( :person_id bigint, :encntr_id bigint, :
Vue页面间传值，【params】和【query】以及localStorage缓存传值（obj缓存传值）

一，【params】和【query】传值：传值页面： <template> <div> <el-card class="post-card" v-for="item in postList" v-bind:key="item.id" v-on:click="turnToPost(item.id)"> </el-card> </div> </template>
sqlsrv_query

sqlsrv_querysqlsrv_query 04/11/2019 本文内容准备并执行语句。Prepares and executes a statement. 语法Syntax sqlsrv_query(resource $conn, string $tsql [, array $params [, array $options]]) 参数Parameters $conn：与已准备的语句相