Как передать данные из одного компонента в Angular без создания нового экземпляра? - PullRequest
Новая
       28

Как передать данные из одного компонента в Angular без создания нового экземпляра?

0 голосов
/ 15 ноября 2018

У меня есть два компонента. Объект будет добавлен в массив внутри Component2. В методе smae этот объект должен быть передан в массив внутри Component1.

Я попробовал @Input и услуги, получая помощь от решений, которые я нашел здесь. Но они создают новый экземпляр компонентов. Массив сбрасывается, вместо того, чтобы в него помещался новый объект.

Что за исправление? Не могу понять, как правильно использовать @Input с роутером-розеткой.

Универсальное решение было бы очень полезно. Спасибо.

Ответы [ 2 ]

0 голосов
/ 15 ноября 2018

Вы можете использовать взаимодействие компонентов через сервис .

Компонент А: 

@Component({
  selector: 'app-a',
  template: `
    <h1>A</h1>
    <p *ngFor="let item of dat">{{item}}</p>
    <button type="button" (click)="addNumber()">Add Number</button>
  `,    
})
export class AComponent implements OnInit {

  dat: Array<number> = [1, 2, 3];
  count: number;
  constructor(private service: AppService){}

  ngOnInit(){
    this.count = 3;
  }

  addNumber(){
    this.count++;
    this.dat.push(this.count);
    this.service.addNewValue(this.count);
  }
}

Компонент B: 

@Component({
  selector: 'app-b',
  template: `
    <h1>B</h1>
    <p *ngFor="let item of dat">{{item}}</p>
  `,    
})
export class BComponent {
  dat: Array<number> = [1, 2, 3];
  subscription: Subscription;

  constructor(private service : AppService){
    this.subscription = this.service.newValue$.subscribe((res)=>{
      this.dat.push(res);
    })
  }
}

Сервис: 

export class AppService {

  private newValue = new Subject<number>();
  newValue$ = this.newValue.asObservable();

  constructor(private http: HttpClient) { }

  // Service message commands
  addNewValue(value: number) {
    this.newValue.next(value);
  }
}

Демонстрация: Stackblitz

0 голосов
/ 15 ноября 2018

если вы передаете данные через маршрутизатор, вы можете передать данные с помощью NavigationExtras. 

import { NavigationExtras, Router } from '@angular/router';
// all the code we know here
export class AnyComponent {

constructor(private router: Router) { }

  passData(data) {
    let navigationExtras: NavigationExtras = {
      queryParams: {
      passedData: data
      };
      this.router.navigate(['whereUGo'], navigationExtras);
  }
}

, тогда вы перехватываете другой компонент с активированным маршрутом.

https://angular.io/api/router/NavigationExtras

Вот информация.

...