2017-02-07 14 views
0

Я пытаюсь сделать следующее:Angular2 загрузки/выгрузки компонентов из <button>

  1. нагрузки компонент под названием «Make.component»

  2. в Make.component.html Я хотел бы иметь что-то вроде этого:
    <button *ngIf="for make in makes" (click)="loadModelsComponent({{ make.id }})"> {{make.name}} </button>

  3. в то время как Models.component загружается, 'разгрузить' (или удалить) Make.component.

В общем, что я пытаюсь описать здесь выглядит следующим образом:
У меня есть кнопка для каждого «Make», который имеет уникальный идентификатор (в make.id) При нажатии на эту кнопку, Я бы хотел, чтобы он загружал компонент 2, Models.component (- обратите внимание, что между Makes и Models через Make.id существует связь между Makes и Models), поэтому мне нужно передать 'make.id' в Models.component.

Я считаю, что могу сделать это с помощью маршрутизации, просто не уверен, как это выполнить правильно. Приветствуются фрагменты кода, концепции и советы.

Релевантно: Я планирую использовать сервис (доступ к API Edmunds) для получения этих данных, поэтому мне нужно передать make.id в модели (.component) ._ myApiService.getModels (make.id) [псевдокод ]

+0

Итак, когда вы нажимаете кнопку (которая имеет данный идентификатор), вы хотите загрузить новый компонент (как в, перейти к новому представлению) и передать некоторые данные? Если это так, я могу ответить вам, я отправлю его. Если я уйду с базы, я ее удалю. –

+0

@ Тим, это именно то, что я пытаюсь сделать! – Moshe

ответ

1

Поскольку вы ссылаетесь на маршрутизацию, я предполагаю, что вы имеете в виду, что когда вы нажимаете кнопку, вы хотите перейти к обычному настроенному маршруту и ​​передавать некоторые данные вместе с этим новым компонентом.

я сделать это таким образом: если у вас есть маршрут, сконфигурированный (как и любой другой маршрут), в вашей кнопки обработчик щелчка, вы можете сделать это (если вы вводили маршрутизатор):

this.router.navigate ([ '/theRoute', { message: 'somedata' } ]); 

Вы потребляют принимающий компонент конец таким образом (если вы впрыснуть ActivatedRoute):

this.route.snapshot.params [ 'message' ]; 

Я делаю это здесь, и там, делает это довольно легко. Избегает того, чтобы использовать «: лексема» формат и все это в вашей конфигурации, вы просто конфиг маршрут просто:

{ path: 'myfabroute', component: MyFabComponent } 

Опять же, Theres другие способы сделать это. Это то, к чему я склонен к этим дням.

+0

, потому что я новичок в этом, я был бы признателен, если бы вы были более откровенными с тем, что вы здесь делаете. Куда идут эти фрагменты кода? Я планирую использовать формат «: токена», потому что каждый вид модели уникален для make.id, если это имеет смысл – Moshe

+0

Я не использую формат токена, потому что он вам не нужен. Формат токена просто дает вам способ передать некоторую динамическую информацию в принимающий компонент/представление, но для меня это немного неуклюже. Это делает то же самое, но позволяет передавать что-либо; строки, цифры, объекты, карты, наборы, все, что вам нужно, и все остается простым и чистым. –

+0

Фрагмент 1 будет включен в ваш обработчик нажатия кнопки. Вы бы захватили любой идентификатор, который удерживает эту кнопку, отправьте его во втором аргументе как {propname: 'my_value'}.Второй фрагмент, просто поместите его в ngOnInit компонента, на который вы направили (принимающего). Теперь у вас есть данные, которые вы отправили в новый компонент и можете делать по мере необходимости. Обратите внимание, что «propname» и «my_value» могут быть любыми, как вам нравится, это может быть {incoming_data: some_object_or_string_or_anything}, после чего вы поймаете его в принимающем компоненте, используя this.router.snapshot.params ['incoming_data'] –