В Angular как передать значение от одного компонента другому, когда компоненты не являются родительскими / дочерними? - PullRequest
Новая
       6

В Angular как передать значение от одного компонента другому, когда компоненты не являются родительскими / дочерними?

0 голосов
/ 06 февраля 2020

Я новичок в Angular2 + и читаю много материалов, включая сайт Angular.

С angular, для родителя / ребенка мы можем использовать @Input () https://angular.io/guide/template-syntax#input - and-output-properties

Но в моем коде у меня есть два разных модуля, и у каждого есть один компонент.

Как передать значение объекта из component1 Module1 на компонент2 модуля2?

Я пытался с @Input (), но безуспешно, и из ссылки Argular выше @Input () ссылается на parent / child, что не в моем случае, ну, из я понимаю, что это не так:

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

Спасибо за любые комментарии Ademir

Ответы [ 3 ]

1 голос
/ 06 февраля 2020

Как упоминалось в комментариях, вы можете использовать полнофункциональный менеджер состояний, такой как Redux.

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

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

0 голосов
/ 07 февраля 2020

App.component.ts 

import { Component } from '@angular/core';
import {dataService} from './dataservice.service';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  //name = 'Angular';
  constructor(private SVC: dataService ){

  }
  sender(){
    this.SVC.name="sender"
    console.log("sending this string:    "+this.SVC.name)
  }

}

dataservice.service.ts 

import { Injectable } from '@angular/core';

@Injectable()
export class dataService {
name=""
  constructor() { } 
}

recceive.component.ts 

import { Component, OnInit } from '@angular/core';
import {dataService} from '../dataservice.service';
@Component({
  selector: 'app-recieved',
  templateUrl: './recieved.component.html',
  styleUrls: ['./recieved.component.css']
})
export class RecievedComponent implements OnInit {
  constructor(private dataservice: dataService ){

  }
  ngOnInit() { 
  }
print(){
  console.log("recieved:    " +this.dataservice.name)
}
}

Здесь я устанавливаю name = "sender" в app.component и использует его в receive.component.ts

demo

0 голосов
/ 07 февраля 2020

Вы можете просто воспользоваться услугой Angular , прочитать учебник 'Добавить службы' на веб-сайте Angular, прочитать несколько раз, вы полностью его поймете .
Нажмите здесь: https://angular.io/tutorial/toh-pt4

...