Альтернатива $scope в Angular 2.0 - программирование
Подтвердить что ты не робот

Альтернатива $scope в Angular 2.0

В Angular 2.0 не будет $scope.

Какая альтернатива этому? Как я смогу поделиться данными между компонентами? Будет ли опция scope доступна в директивах? Практически, есть ли альтернатива этому, с которой я могу познакомиться?

Я знаю controller as, но я читал, что контроллеры также будут устранены.

Смущенный такой революцией команда Angular начала.

4b9b3361

Ответ 1

Angular 2.0 использует this вместо $scope.

Одним из основных изменений в версии 2.0 является гибель контроллера и новый акцент на компонентах. Большим преимуществом перехода к приложениям на основе компонентов является то, что проще определить их интерфейсы; Кроме того, элементы HTML уже имеют легко отображаемый интерфейс в событиях, атрибутах и ​​свойствах.

См. раздел Миграция AngularJS 1.3 на 2.0 здесь. Также см. Полную документацию Angular 2.0 здесь

Ответ 2

В Angular2 вы используете общие службы вместо $scope https://angular.io/docs/ts/latest/cookbook/component-communication.html

@Injectable()
class SharedService {
  someState:String;
  someEventStream:Subject<String> = new Subject<String>();
}
@Component({
  selector: ...,
  providers: [SharedService] 
})
class MyComponent {
  constructor(private sharedService:SharedService) {}
}

Для каждого провайдера ([SharedService] является коротким для [{provide: SharedService, useClass: SharedService}]) в приведенном выше примере поддерживается один экземпляр.

Объем такого провайдера является компонентом, в котором он предоставляется, и его потомками, когда ни один потомок не имеет того же зарегистрированного провайдера.

Когда компонент запрашивает constructor(private sharedService:SharedService) зависимости constructor(private sharedService:SharedService), Angulars DI (инъекция зависимостей) начинает искать компоненты собственных поставщиков, а затем вверх к корневому компоненту, а затем провайдерам, зарегистрированным при загрузке. Он возвращает первый найденный.

Если два компонента получили один и тот же экземпляр (от одного и того же провайдера), то они могут обмениваться данными с помощью этой услуги, подписываясь на события и записывать события Subject а также читать и записывать состояние или путем вызова методов в службе.

Ответ 3

Использование controller as - хороший способ привыкнуть к работе без $scope, хотя вам все равно потребуется $scope для нескольких вещей, таких как наблюдатели и события. Контроллеры на самом деле не удаляются в Angular 2.0. Но не будет эквивалента ng-controller. Вместо того, чтобы иметь контроллеры и представления, у вас будут только директивы, которые, по сути, инкапсулируют контроллер и представление.

Ответ 4

Я бы не стал беспокоиться о версии 2.0. Команда angular заявила, что:

Слишком рано начинать строить что-либо с кодом 2.0 - мы все еще находимся на самой ранней стадии разработки проекта.

Попытка узнать что-то, что находится на ранней стадии развития, может в значительной степени стать огромной тратой вашего времени. При этом, если вы хотите начать переход на angular 2.0, новый маршрутизатор, который был введен с 1.3, - теперь - маршрутизатор, который они намереваются использовать для 2.0

Ответ 5

Angular 2 не передает данные между такими компонентами, как Angular 1. Вместо этого они передают данные, используя его внутри шаблона и передавая события (просто используя поведение пузыря, которое по умолчанию имеет событие). И вы получаете доступ к данным из шаблона с помощью класса компонентов (посмотрите на видео 1000000000 "angular 2 - Как начать" на Youtube, если вы не знаете, что я имею в виду под классом).

Ответ 6

Мы можем сделать это в угловом режиме без ввода услуги в класс компонентов. Используя тему rxjs, "Предмет поведения", который переносит наши данные, выполняя то же требование, что и переменная $ scope

Вот пример stackblitz, где я экспортирую const letter в sub.service.ts которая подписана в необходимых компонентах.