Angular 2中的更改检测 [英] Change detection in Angular 2
问题描述
我正在将角度1和角度2积分在一起.因此，我有角度1控制器和服务以及角度2组件.这些都可以很好地用于数据检索和存储，反之亦然.以下是我的html页面.
I am integrating angular 1 and angular 2 together. Therefore I have angular 1 controller and service and angular 2 component. Those are working fine for data retrieving and storing vice versa. 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>
控制器如下，
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();
}
}
需要始终为Angular 2触发一个事件(getUser)，才能从Angular 1获取名称.工作的监听器 https://plnkr.co/edit/fYbIeJUUY7Xst7GEoi2v?p=preview 每当更改角度1输入时，我都想更新角度2模型.有没有办法做到这一点?角度2中有监听器，但我不知道如何使他们收听角度1服务.
An event(getUser) needs to be fired always for angular 2 to get the name from the angular 1. Working plunker https://plnkr.co/edit/fYbIeJUUY7Xst7GEoi2v?p=preview I want to update the angular 2 model whenever the angular 1 input is changed. Is there a way to do this? There are listeners in angular 2, but I don't know how to make them listen to angular 1 service.
推荐答案
我想您应该看看Angular2和$ apply中的 ngDoCheck 和 OnChanges 生命周期挂钩在您的Angular1中.
I guess you should have a look at the ngDoCheck and OnChanges lifecycle hooks in Angular2 and $apply in your Angular1.
使用$ apply修改您的控制器，如下所示
using $apply your controller is modified 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();
};
});
使用ngDoCheck对您的 user.section.component.ts 进行如下修改
Using ngDoCheck your user.section.component.ts is modified 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 completely logging the username changes in angular 1, but I can't figure why is it not binding it to the UI.
实时演示版 .
LIVE DEMO of your updated plunker.
这篇关于Angular 2中的更改检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
