All geek questions in one place

Change Detection in Angular 2

I integrate angular 1 and angular 2 together. Therefore, I have angular 1 controller and service and angular 2 components. They work great for retrieving and storing data the other way around. Below is my html page.

<body> <h3>Angular 1 service</h3> <div ng-controller="MainController"> <input ng-model="username" /> <button ng-click="setUser()">Set User</button> <button ng-click="getUser()">Get User</button> <div>User in service : {{user}}</div> </div> <hr> <h3>Angular 2 component uses Angular 1 service</h3> <user-section></user-section> </body>

Controller as below

 myApp.controller('MainController', function ($scope, UserService) { $scope.getUsers = function () { UserService.setUser($scope.username); window.location = './angular2.html' }; $scope.setUser = function () { UserService.setUser($scope.username); $scope.user = $scope.username; }; $scope.getUser = function () { $scope.user = UserService.getUser(); }; });

The service is below

 function UserService(){ this.user = "default"; } UserService.prototype.getUsers = function(){ var users = ['user1', 'user2', 'user3']; return users; } UserService.prototype.setUser = function(usr){ this.user = usr; } UserService.prototype.getUser = function(){ return this.user; }

The angular 2 component is shown below.

  import {Component, Inject} from 'angular2/core'; @Component({ selector: 'user-section', templateUrl: '<div> <input [(ngModel)]="username" /> <button (click)="setUser()">Set User</button> <button (click)="getUser()">Get User</button> <button (click)="getUsers()">Get Users</button> <br/> <ul> <li *ngFor="#userId of users">{{userId}}</li> </ul> <div>User in service : {{user}}</div> </div>' }) export class UserSection { constructor(@Inject('UserService') userService:UserService) { this.users = []; this.username = ''; this._UserService = userService; } getUsers(){ this.users = this._UserService.getUsers(); } setUser(){ this._UserService.setUser(this.username); } getUser(){ this.user = this._UserService.getUser(); } }

The event (getUser) must always be fired for angular 2 in order to get the name from angular 1. Working plunker https://plnkr.co/edit/fYbIeJUUY7Xst7GEoi2v?p=preview I want to update the angular 2 model whenever the input of angular 1 changes. Is there any way to do this? There are listeners in angular 2, but I don't know how to get them to listen to the angular 1 service.

0
source share
1 answer

I think you should take a look at ngDoCheck and OnChanges lifecycle bindings in Angular2 and $ apply in your Angular1.

using $ apply your controller is changed as below

 var myApp = angular.module("hybridExampleApp", []); //define as Angular 1 service myApp.service('UserService', UserService); myApp.controller('MainController', function ($scope, UserService) { $scope.$watch('username',function(){ $scope.setUser(); }); $scope.getUsers = function () { UserService.setUser($scope.username); window.location = './angular2.html' }; $scope.setUser = function () { UserService.setUser($scope.username); $scope.user = $scope.username; }; $scope.getUser = function () { $scope.user = UserService.getUser(); }; });

Using ngDo Check your user.section.component.ts as below

 import {Component, Inject,ChangeDetectionStrategy,ngDoCheck,ngOnChanges} from 'angular2/core'; @Component({ selector: 'user-section', templateUrl: './src/ng2-component/user.section.tpl.html', changeDetection: ChangeDetectionStrategy.OnPush }) export class UserSection implements ngDoCheck, ngOnChanges{ username123:number; constructor(@Inject('UserService') userService:UserService) { this.users = []; this.username = ''; this.user=0; this._UserService = userService; } ngOnChanges(){ console.log('adfkjna'); } getUsers():void{ this.users = this._UserService.getUsers(); } setUser():void{ this._UserService.setUser(this.username); } getUser():void{ this.user = this._UserService.getUser(); } ngDoCheck(){ this.user = this._UserService.getUser(); this.getUser(); console.log(this.user); } }

My code is fully logged , the username is changed to angular 1, but I cannot understand why it does not bind it to the user interface .

LIVE DEMO of your updated plunger.

+1
source

Source: https://habr.com/ru/post/1264343/

More articles:


All Articles