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