Как передать массив в параметр маршрутизации?
* Делаю угловой проект (версия 6+). Я хочу передать параметр массива, используя маршрутизацию. *
const routes: Routes = [
{
path: 'books',
component: BookComponent
}
,
{
path: 'books/:id',
component: BookDetailComponent
},
...
Не могли бы вы поделиться фрагментом кода, который вы пробовали, или, пожалуйста, уточните свой вопрос.
Прости. Если в файле .ts есть код " userIDs = [1,3,4] ". В html я хочу использовать routerLink в теге кнопки <button type = "button" class = "btn btn-primary" [routerLink]= "['/order', userID > купить </button>
@SangminKim Вы должны обновить свой вопрос в соответствии с приведенным выше комментарием, чтобы другой эксперт мог легко его понять.
Ответы 2
Есть два способа, которыми вы можете воспользоваться,
Способ 1:
HTML
<a routerLinkActive = "active" [routerLink] = "['/home', userIDs.join()]">Home</a>
ТС:
userIDs: Array<number> = [1, 3, 4];
Машинопись домашнего компонента:
export class HomeViewComponent implements OnInit {
userIDs: Array<number> = [];
constructor(private router: ActivatedRoute) { }
ngOnInit() {
this.router.params.subscribe(params => {
this.userIDs = params['ids'].split(',');
});
}
}
Модуль маршрутизатора:
path: 'home/:ids', component: HomeViewComponent }
Способ 2 (с использованием queryParams):
Вам не нужно ничего добавлять в модуль маршрутизатора, как мы делаем в приведенном выше методе.
HTML
<a routerLinkActive = "active" [routerLink] = "['/home']" [queryParams] = "{ids: userIDs}">Home</a>
ТС
userIDs: Array<number> = [1, 3, 4];
Машинопись домашнего компонента:
export class HomeViewComponent implements OnInit {
userIDs: Array<number> = [];
constructor(private router: ActivatedRoute) { }
ngOnInit() {
this.router.queryParams.subscribe(p => {
this.userIDs = p.ids;
});
}
}
Это именно то, что я искал.
Добро пожаловать, рад помочь вам. @SangminKim
В html отправить данные здесь сначала вы импортируете активированный маршрут, как показано ниже. импортировать {ActivatedRoute} из '@angular/router';
а также в строительстве конструкция (частные _routes: ActivatedRoute) {}
In====== ngOnInit( this._route.params.subscribe(params => { this.id = параметр ['id']; )
отправка данных JSON через параметры маршрутизации не является хорошим подходом, либо сохраните их в локальном хранилище, либо вызовите HTTP на навигационной странице.