Angular Component Input binding 👨🏻💻
До 16 версии Angular при необходимости получения какого-либо значения из queryParams в компоненте, необходимо было добавить в конструктор ActivatedRoute, подписаться на его параметр и, например, записать его в локальную переменную, сложно, не так ли?
this.route.queryParams.pipe(map(queryParams) => queryParams['name']).subscribe(...);
В 16 версии нам предоставили возможность делать это намного проще 🚀
Для начала необходимо включить эту опцию при конфигурировании Router:
bindToComponentInputs: true // module подход (внутри конфига RouterModule)
withComponentInputBinding() // standalone подход (внутри provideRouter)
После этого у нас появляется возможность получить в Input компонента одноименный queryParam:
@Input() name: string = ''; // ...url?name=John...
В случае коллизии имён приоритетность будет следующей:
1. Route data (data: { name: 'Alex' })
2. Path param (/Ivan)
3. Query param (?name=John)
Хорошая статья с подробностями 📑
#статья #заметки #angular
До 16 версии Angular при необходимости получения какого-либо значения из queryParams в компоненте, необходимо было добавить в конструктор ActivatedRoute, подписаться на его параметр и, например, записать его в локальную переменную, сложно, не так ли?
this.route.queryParams.pipe(map(queryParams) => queryParams['name']).subscribe(...);
В 16 версии нам предоставили возможность делать это намного проще 🚀
Для начала необходимо включить эту опцию при конфигурировании Router:
bindToComponentInputs: true // module подход (внутри конфига RouterModule)
withComponentInputBinding() // standalone подход (внутри provideRouter)
После этого у нас появляется возможность получить в Input компонента одноименный queryParam:
@Input() name: string = ''; // ...url?name=John...
В случае коллизии имён приоритетность будет следующей:
1. Route data (data: { name: 'Alex' })
2. Path param (/Ivan)
3. Query param (?name=John)
Хорошая статья с подробностями 📑
#статья #заметки #angular