Доступ к переменной из одного компонента в другой

Я пытаюсь сделать угловой проект, но я не занимаюсь веб-разработкой. Его простой магазин.
Я хотел получить некоторую информацию от sqlite от Play Framework. Это работает.

После того, как я получу его в angular и покажу. Он тоже работает. Услуга:

@Injectable()
export class ProductService {

constructor(private http: Http) { }

getProducts() {
  const headers: Headers = new Headers();
  headers.append('Accept', 'application/json');
  headers.append('Content-Type', 'application/json');

  const options = new RequestOptions({headers: headers});

  return this.http.get('http://localhost:9900/', options)
  .map(response => <Product[]>response.json());
 } 
}

И место, когда я беру все продукты:

export class ProductComponent implements OnInit {

public products: Product[];
actualProduct: Product;
productForm: FormGroup;
public quantity: number;
private activeFilter: string = "reset";
public allFilters: Array<string>;


constructor(private productService: ProductService,private router:Router) {
  this.allFilters =  ['ocean', 'river', 'aquarium', 'reset'];
}

ngOnInit() {
  this.productService.getProducts().subscribe(data => this.products = data);
}

public getActualProduct() {
  return this.actualProduct;
}

clickedProduct(product) {
  this.actualProduct = product;
  let link = ['/detail', product.prodId];
  this.router.navigate(link);
}

public setFilter(filter: string) {
 this.activeFilter = filter;
 }
}

Итак, мой вопрос: как я могу получить доступ к продуктам массива в других компонентах? Потому что теперь, когда я нажимаю кнопку с функцией clickedProduct, она работает отлично. Он отображается в консольном объектном продукте. Но когда я пытаюсь использовать продукт для отображения сведений о продукте в другом компоненте, я терплю неудачу:

 export class ProductDetailComponent implements OnInit {

 selectedProduct: Product;
 products: Product[];
 quantity: number;

 constructor(
 private productService:ProductService,
 private productComponent: ProductComponent,
 private route:ActivatedRoute,
 private location:Location,
  // private cartStore: CartStore
 ) {  }

ngOnInit() {
    this.selectedProduct = this.productComponent.getActualProduct();
}

addToCart(product) {
  console.log(this.selectedProduct)
  console.log(product)
  //this.cartStore.addToCart(product, this.quantity || 1)
}

goBack() {
    this.location.back()
 }
}

Как я могу получить переменную factProduct в ProductDetailComponent или как получить массив всех продуктов? Я пытался использовать "@Input() factProduct: Product" в productComponent, но на самом деле это не работает. Спасибо за помощь.


person Shrike    schedule 20.06.2017    source источник
comment
Существуют ли отношения родитель-потомок между компонентами? или они отображаются в разных маршрутах?   -  person Jota.Toledo    schedule 20.06.2017
comment
Если ваш вопрос касается Angular, добавьте тег angular.   -  person    schedule 20.06.2017


Ответы (1)


Это тесно связано с тем, как эти компоненты связаны друг с другом.

Если существует отношение родитель-потомок, вы можете передавать информацию дочернему компоненту с помощью @Input свойств и прослушивать дочерние события в родительском компоненте с помощью @Output свойств.

Если такой связи между компонентами не существует (например, маршрутизируемые компоненты), то наиболее распространенным вариантом является создание службы, которая управляет потоком информации/событий между компонентами. .

Дополнительную информацию см. в документации.

person Jota.Toledo    schedule 20.06.2017
comment
Они отображаются двумя разными способами. Теперь я понимаю, почему я не мог использовать @Input(), как пытался. Можно ли создать сервис только для передачи одного массива? Потому что это на самом деле все, что мне нужно. - person Shrike; 20.06.2017
comment
Да, вам нужно будет капсулировать этот массив в сервисе и предлагать функции для его обновления, сброса и получения. Проверьте этот раздел angular.io/guide/< /а> - person Jota.Toledo; 20.06.2017
comment
Благодарю вас! попробую сделать это ;) - person Shrike; 20.06.2017