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

角度2成分は以下の通りであるサービスは、以下の通りである

、

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

、

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 角度1の入力が変更されるたびに、角度2のモデルを更新します。これを行う方法はありますか？アンサンブル2にはリスナーがいますが、アングル1のサービスに耳を傾ける方法はわかりません。

出典

2017-01-11 shamila

私はあなたがAngular2でngDoCheckとOnChangesライフサイクルフックを見ていると$あなたのAngular1に適用する必要がありますね。お使いのコントローラを適用する$を使用して

があなたの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); 

    } 
}

私のコード以下のように変更されngDoCheckを使用して

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

以下のように変更されて完全にログですユーザー名は角度1で変わりますが、なぜそれがUIにバインドされていないのかわかりません。

LIVE DEMO更新されたプランナーの

出典

2017-01-11 08:00:54 Aravind

シャミラ。これはあなたが探していたものですか？ – Aravind

はい。私は答えを得た。ありがとう。変更されたプランカは以下の通りです。https://plnkr.co/edit/rQ8QiLVtlo4QK0KNVGPH?p=preview – shamila

角度2の変化検出

答えて

関連する問題