각도 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 서비스를 듣는 방법을 모르겠습니다.
샤밀라. 이게 니가 찾고 있던거야? – Aravind
예. 대답 해 줘서 고마워. 변경된 플 런커는 다음과 같습니다. https://plnkr.co/edit/rQ8QiLVtlo4QK0KNVGPH?p=preview – shamila