Angular 2 - Что эквивалентно Root Scope?

Все! У меня есть этот компонент, который, когда я нажимаю на href, должен установить переменную как Root Scope, если она была Angular 1, как это:

selector: 'my-component'
template : `
            <div (click)="addTag(1, 'abc')">`

constructor() {
    this.addTag = function(id, desc){
        myGlobalVar = { a: id, b: desc};
    };

Тогда в моем родительском компоненте, сама страница (на самом деле), я должен делать что-то вроде:

<my-component></my-component>
<p>My Component is returning me {{ ?????? }}

Каков наилучший подход к такому делу?

Ответ 1

Чтобы реализовать глобальную переменную, вы можете реализовать общую службу. Вы сможете сохранить данные, и все компоненты могут иметь к ним доступ.

Для этого просто реализуйте службу и устанавливайте ее поставщика при развертывании приложения:

bootstrap(AppComponent, [ MySharedService ]);

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

Пример

Услуга:

export class MySharedService {
  data: any;
  dataChange: Observable<any>;

  constructor() {
    this.dataChange = new Observable((observer:Observer) {
      this.dataChangeObserver = observer;
    });
  }

  setData(data:any) {
    this.data = data;
    this.dataChangeObserver.next(this.data);
  }
}

Используйте его в компоненте:

@Component({
  (...)
})
export class MyComponent {
  constructor(private service:MySharedService) {
  }

  setData() {
    this.service.setData({ attr: 'some value' });
  }
}

Если вы хотите уведомить компоненты о том, что данные были обновлены, вы можете использовать наблюдаемые поля в общей службе:

@Component({
  (...)
})
export class MyComponent {
  constructor(private service:MySharedService) {
    this.service.dataChange.subscribe((data) => {
      this.data = data;
    });
  }
}

См. этот вопрос для получения дополнительной информации:

Делегирование: EventEmitter или Observable в Angular2

Эта страница на веб-сайте angular.io также может вас заинтересовать:

https://angular.io/docs/ts/latest/cookbook/component-communication.html

Ответ 2

В Angular2 понятие области действия теперь эквивалентно переменным-членам и @Input свойствам компонента или директивы. Когда они ссылаются на элементы DOM, связующие свойства также включают эти атрибуты или свойства самого элемента DOM.

В Angular1 вы можете определить переменную области видимости в $rootScope и обратиться к ней в пределах глубоко вложенной дочерней области, не передавая ее явно в директивы из-за прототипического характера наследования сферы. В Angular2 наследования не существует. Если вы хотите передать данные из области родительского компонента в область непосредственного дочернего объекта, вы должны сделать это явно, хотя привязка директивы @Input. Например, <directive [myBinding]="model"></directive>, свойство model в области родительского компонента передается в область дочерней директивы через свойство директивы @Input, называемое myBinding.

Ближайшим эквивалентом $rootScope является ответ @Thierry: использование общей службы для извлечения и изменения данных, которые могут быть введены в любой компонент через DI. В отличие от Angular1, который имеет глобальный инжектор, Angular2 вводит понятие иерархического инжектора. Каждый компонент иерархической цепи компонентов может определить его собственный инжектор. В Angular2 иерархия инжекторов участвует в разрешении типа аналогичным образом, что переменные $scope были разрешены в Angular1 с использованием наследования $scope.