Обнаружение изменений в Angular 2

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

<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 Я хочу обновлять модель angular 2 всякий раз, когда изменяется вход angular 1. Есть ли способ сделать это? В angular 2 есть слушатели, но я не знаю, как заставить их слушать службу angular 1.


typescript angular angularjs integration
person shamila    schedule 11.01.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, вам следует взглянуть на хуки жизненного цикла ngDoCheck и OnChanges в Angular2 и $apply в вашем Angular1.

используя $apply, ваш контроллер изменяется, как показано ниже.

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

    }
}

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

ЖИВАЯ ДЕМО вашего обновленного плункера.

person Aravind    schedule 11.01.2017
comment
Шамила. Это то, что ты искал? - person Aravind; 11.01.2017
comment
Да. Получил ответ Спасибо. Измененный плункер выглядит следующим образом: - person shamila; 11.01.2017