Обнаружение изменений в Угловом 2

Я интегрирую угловые 1 и угловые 2 вместе. Поэтому у меня есть угловой 1 контроллер и сервисный и угловой 2 компонент. Они отлично работают для извлечения и хранения данных наоборот. Ниже приведена страница html.Обнаружение изменений в Угловом 2

<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>

Контроллер, как показано ниже,

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(); 
    }; 
});

Услуга, как показано ниже,

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; 
}

Угловое 2 компонента, как показано ниже,

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(); 
     } 
    }

Событие (getUser) необходимо всегда запускать для углового 2, чтобы получить имя от углового 1. Рабочий плунжер https://plnkr.co/edit/fYbIeJUUY7Xst7GEoi2v?p=preview Я хочу обновить угловую модель 2 всякий раз, когда изменяется угловой вход 1. Есть ли способ сделать это? Есть слушатели в угловом 2, но я не знаю, как заставить их слушать угловой 1 сервис.

источник

2017-01-11 shamila

Я думаю, вы должны смотреть на ngDoCheck и OnChanges жизненным циклом крючков в Angular2 и $ применяются в вашей Angular1.

с помощью $ применять контроллер модифицируется, как показано ниже

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(); 
    }; 
});

Используя ngDoCheck ваши user.section.component.ts изменяется, как показано ниже

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); 

    } 
}

Мой код полностью каротаж имя пользователя изменяется в угловом 1, но я не могу понять, почему он не привязывает его к UI.

LIVE DEMO вашего обновленного плункера.

источник

2017-01-11 08:00:54 Aravind

Shamila. Это то, что ты искал? – Aravind

Да. Я получил ответ Спасибо. Измененный плункер находится ниже https://plnkr.co/edit/rQ8QiLVtlo4QK0KNVGPH?p=preview – shamila

Обнаружение изменений в Угловом 2

ответ

Смежные вопросы