Как я могу делиться данными между компонентами в Angular 2?

В Angular 1.x.x вы просто запрашиваете один и тот же сервис и получаете один и тот же экземпляр, позволяющий обмениваться данными в сервисе.

Теперь в Angular 2 у меня есть компонент, имеющий ссылку на мой сервис. Я могу читать и изменять данные в сервисе, и это хорошо. Когда я пытаюсь внедрить тот же сервис в другой компонент, мне кажется, что я получаю новый экземпляр.

Что я делаю не так? Это неправильный шаблон (использование службы для обмена данными) или мне нужно пометить службу как одноэлементную (в одном экземпляре приложения) или как-то еще?

Я нахожусь в 2.0.0-alpha.27/ кстати

Я внедряю сервис через appInjector (редактировать: теперь providers) в аннотации @Component, а затем сохраните ссылку в конструкторе. Он работает локально в компоненте - только не между компонентами (они не разделяют один и тот же экземпляр службы), как я и думал.

ОБНОВЛЕНИЕ . Начиная с Angular 2.0.0, у нас теперь есть @ngModule, где вы определяете сервис в providers свойство указанного @ngModule. Это обеспечит передачу одного и того же экземпляра этой службы каждому компоненту, службе и т. Д. В этом модуле. https://angular.io/docs/ts/latest/guide/ngmodule .html # провайдеров

71 голос | спросил Per Hornshøj-Schierbeck 24 J0000006Europe/Moscow 2015, 15:41:09

5 ответов


0

Сервис-синглтон - хорошее решение. Другой способ - data/events bindings.

Вот пример обоих:

class BazService{
  n: number = 0;
  inc(){
    this.n++;
  }
}

@Component({
  selector: 'foo'
})
@View({
  template: `<button (click)="foobaz.inc()">Foo {{ foobaz.n }}</button>`
})
class FooComponent{
  constructor(foobaz: BazService){
    this.foobaz = foobaz;
  }
}

@Component({
  selector: 'bar',
  properties: ['prop']
})
@View({
  template: `<button (click)="barbaz.inc()">Bar {{ barbaz.n }}, Foo {{ prop.foobaz.n }}</button>`
})
class BarComponent{
  constructor(barbaz: BazService){
    this.barbaz = barbaz;
  }
}

@Component({
    selector: 'app',
    viewInjector: [BazService]
})
@View({
  template: `
    <foo #f></foo>
    <bar [prop]="f"></bar>
  `,
  directives: [FooComponent, BarComponent]
})
class AppComponent{}

bootstrap(AppComponent);

Смотреть в прямом эфире

ответил Alexander Ermolov 25 J0000006Europe/Moscow 2015, 00:14:07
0

Комментарий @maufarinelli заслуживает отдельного ответа, потому что до тех пор, пока я его не увидел, я все еще бился головой об стену с этой проблемой, даже с ответом @Alexander Ermolov.

Проблема в том, что когда вы добавляете providers к вашему component:

@Component({
    selector: 'my-selector',
    providers: [MyService],
    template: `<div>stuff</div>`
})

Это приводит к внедрению нового экземпляра вашей службы ... а не в singleton .

Поэтому удалите все экземпляры своего providers: [MyService] в своем приложении, кроме module, и это будет работать!

ответил Serj Sagan 22 +03002016-10-22T13:54:03+03:00312016bEurope/MoscowSat, 22 Oct 2016 13:54:03 +0300 2016, 13:54:03
0

Вы должны использовать входы и выходы @Component декоратора. Вот самый простой пример использования обоих;

import { bootstrap } from 'angular2/platform/browser';
import { Component, EventEmitter } from 'angular2/core';
import { NgFor } from 'angular2/common';

@Component({
  selector: 'sub-component',
  inputs: ['items'],
  outputs: ['onItemSelected'],
  directives: [NgFor],
  template: `
    <div class="item" *ngFor="#item of items; #i = index">
      <span>{{ item }}</span>
      <button type="button" (click)="select(i)">Select</button>
    </div>
  `
})

class SubComponent {
  onItemSelected: EventEmitter<string>;
  items: string[];

  constructor() {
    this.onItemSelected = new EventEmitter();
  }

  select(i) {
    this.onItemSelected.emit(this.items[i]);
  }
}

@Component({
  selector: 'app',
  directives: [SubComponent],
  template: `
    <div>
      <sub-component [items]="items" (onItemSelected)="itemSelected($event)">
      </sub-component>
    </div>
  `
})

class App {
  items: string[];

  constructor() {
    this.items = ['item1', 'item2', 'item3'];
  }

  itemSelected(item: string): void {
    console.log('Selected item:', item);
  }
}

bootstrap(App);
ответил Jan Kuri 26 SatEurope/Moscow2015-12-26T05:38:36+03:00Europe/Moscow12bEurope/MoscowSat, 26 Dec 2015 05:38:36 +0300 2015, 05:38:36
0

В шаблоне родительского компонента:

<hero-child [hero]="hero">
</hero-child>

В дочернем компоненте:

@Input() hero: Hero;
  

Источник: https://angular.io/docs/ts/последняя /Поваренная книга /компонент-communication.html

ответил Alexis Gamarra 26 MaramSun, 26 Mar 2017 02:56:17 +03002017-03-26T02:56:17+03:0002 2017, 02:56:17
0

Есть много способов. Этот пример использует распространение между родительскими и дочерними элементами. Это очень эффективно.

Я представил пример, который позволяет просматривать использование двух способов привязки данных в двух формах. Если кто-то может предоставить образец plunkr, это было бы очень хорошо; -)

Вы можете искать другой способ, используя поставщика услуг. Вы можете посмотреть это видео тоже для справки: ( Обмен данными между компонентами в Angular )

mymodel.ts (данные для обмена)

// Some data we want to share against multiple components ...
export class mymodel {
    public data1: number;
    public data2: number;
    constructor(
    ) {
        this.data1 = 8;
        this.data2 = 45;
    }
}

Помните: должен быть родитель, который поделится «mymodel» с дочерними компонентами.

Родительский компонент

import { Component, OnInit } from '@angular/core';
import { mymodel } from './mymodel';
@Component({
    selector: 'app-view',
    template: '<!-- [model]="model" indicates you share model to the child component -->
        <app-mychild [model]="model" >
        </app-mychild>'

        <!-- I add another form component in my view,
         you will see two ways databinding is working :-) -->
        <app-mychild [model]="model" >
        </app-mychild>',
})

export class MainComponent implements OnInit {
    public model: mymodel;
    constructor() {
        this.model = new mymodel();
    }
    ngOnInit() {
    }
}

Дочерний компонент, mychild.component.ts

import { Component, OnInit,Input } from '@angular/core';
import { FormsModule }   from '@angular/forms'; // <-- NgModel lives here
import { mymodel } from './mymodel';

@Component({
    selector: 'app-mychild',
    template: '
        <form #myForm="ngForm">
            <label>data1</label>
            <input type="number"  class="form-control" required id="data1 [(ngModel)]="model.data1" name="data1">
            <label>val {{model.data1}}</label>

            label>data2</label>
            <input  id="data2"  class="form-control" required [(ngModel)]="model.data2" name="data2" #data2="ngModel">
            <div [hidden]="data2.valid || data2.pristine"
                class="alert alert-danger">
                data2 is required
            </div>

            <label>val2 {{model.data2}}</label>
        </form>
    ',
})

export class MychildComponent implements OnInit {
    @Input() model: mymodel ;  // Here keywork @Input() is very important it indicates that model is an input for child component
    constructor() {
    }
    ngOnInit() {
    }
}

Примечание. В некоторых редких случаях при разборе HTML-кода может возникать ошибка, поскольку модель не «готова» для использования при инициализации страницы. В этом случае добавьте к HTML-коду условие ngIf:

<div *ngIf="model"> {{model.data1}} </div>
ответил sancelot 24 J000000Monday17 2017, 10:26:58

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132