Angular2 Как передать выбранное значение другому компоненту

Привет, я пытаюсь передать значение, выбранное из одного из вариантов. Я использовал ngModel для сохранения значения, но не могу понять, как передать его другому компоненту. Поскольку они подключены, но не вложены друг в друга, я не мог использовать Eventemitter, потому что я думаю использовать Eventemiiter, я должен использовать селектор дочернего компонента, чтобы вложить компонент в родительский компонент, чего я не хочу делать.

Эти два компонента разделены, и я хочу передать выбранное значение другому компоненту? Как я могу этого добиться?

Ниже мой код.

Шаблон компонента 1

 <div>
    <select (change)="printValue()" formControlName="dogName"  
     class="form-control"  
     class="selectionbox"
     [(ngModel)]="selected_dog" required> 

  <option *ngFor="let d of dogs" [ngValue]="d">
     {{d.dogName}}
  </option>
     </select>

Компонент Component1

     selected_dog: string; 
     printValue () { 
     console.log (this.selected_dog)} // checked if the value is properly stored.

И теперь я хочу передать значение «selected_dog» в Component2. Компонент2

     value1: string; //how to pass selected_dog value to component2's value1.

Я не уверен, что использовать (eventEmitter, output/input?/ng-content?)

Я ценю вашу помощь заранее.


angular components eventemitter
person Lea    schedule 30.03.2017    source источник
comment
Компонент2 находится внутри компонента1?   -  person Sajeetharan    schedule 30.03.2017
comment
Нет, они разделены, поэтому я не могу добиться того, чего хочу, с помощью EventEmitter, потому что они связаны с не вложенными маршрутами.   -  person Lea    schedule 30.03.2017

Ответы (2)


arrow_upward
1
arrow_downward

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

@Injectable()
export class AppMessageService {
    value1: string;
   constructor() { 
     this.value1="";
   }
}

setValue(data: string) {
 this.value1= data;
}

getValue() {
 return this.value1;
}

Внедрите вышеуказанный сервис и используйте setValue, чтобы установить значение в 1-м компоненте и getValue во 2-м компоненте.

person Sajeetharan    schedule 30.03.2017
comment
Я успешно установил значение, но с вашим кодом getValue ничего не печатает. console.log пуст (предположим причину this.value1=;). Нужно ли мне что-то еще добавить для передачи данных из метода setValue в метод getValue? - person Lea; 30.03.2017
comment
отладить и посмотреть, устанавливается ли значение и извлекается ли оно - person Sajeetharan; 30.03.2017
comment
Может ли это быть из-за того, что ngOnInit использовался для вызова метода? - person Lea; 30.03.2017
comment
вы видите установленное значение? - person Sajeetharan; 30.03.2017

arrow_upward
0
arrow_downward

В службе, если вы столкнулись с проблемами с получением значения, вы можете сделать переменную статической и просто получить доступ к переменной, даже не внедряя ее, например AppMessageService.value1.

person Suhail Pallath Sulaiman    schedule 30.03.2017