Vì vậy, tôi đã có một câu hỏi được trả lời ngày hôm qua, và tôi cảm thấy như tôi đang sao chép mã và không hoàn toàn hiểu những gì tôi đã làm cho đến khi tôi bắt đầu đi sâu vào Observables. Vấn đề của tôi là tôi đã luôn luôn có một chút khó khăn trong việc áp dụng và tìm tài liệu cho các nhu cầu của tôi. Điều đó có nghĩa là tôi vẫn dựa khá nhiều vào việc xem người khác đã sử dụng mã như thế nào để tôi có thể hiểu rõ hơn về các khái niệm.Quan sát và cách sử dụng chúng một cách chính xác trong Angular2
Tôi đã dành hầu hết các đọc đêm về nó trong tài liệu khá tuyệt vời ở đây https://github.com/Reactive-Extensions/RxJS/tree/master/doc
Tôi bắt đầu hiểu được những ý tưởng và sức mạnh đằng sau quan sát trên những lời hứa. Tôi có những câu hỏi ba-ish cho đến nay về họ;
- Một số tài nguyên trực tuyến tốt mà tôi có thể bắt đầu tìm hiểu sâu hơn là gì?
Các câu hỏi khác của tôi liên quan đến cách sử dụng chúng hiệu quả hơn trong mã của tôi.
- Làm cách nào để có được giá trị cập nhật cuối cùng của mình và giữ nó trong một biến? Cũng có cách nào tốt để duy trì biến trên tải lại trang không?
tôi sẽ gửi mã của tôi cho vài câu hỏi tiếp theo
@Component({
selector: 'my-app',
providers: [FORM_PROVIDERS, RoleService, UserService],
inputs: ['loggedIn'],
directives: [ROUTER_DIRECTIVES, CORE_DIRECTIVES, LoggedInRouterOutlet],
template: `<body>
<div *ngIf="loggedIn[0]=== 'true'">
<nav class="navbar navbar-inverse navbar-top" role="navigation">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class = "nav navbar-nav">
<li>
<a [routerLink] = "['/RolesList']">Roles</a>
</li>
<li>
<a [routerLink] = "['/UserList']">Users</a>
</li>
<li>
<a [routerLink] = "['/UserRolesList']">User Roles</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a [routerLink] = "['/Login']" (click)="logout()">Logout</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<router-outlet></router-outlet>
</div>
</body>`
})
export class AppComponent{
public loggedIn: Array<string> = new Array<string>();
public localStorage: Array<string> = new Array<string>();
constructor(private _localStorage: LocalStorage){
}
ngOnInit(){
this._localStorage.collection$.subscribe(login_trigger => {
this.localStorage = login_trigger;
});
this._localStorage.loggedIn$.subscribe(to_be_or_not_to_be => {
this.loggedIn = to_be_or_not_to_be;
});
this._localStorage.load();
}
logout(){
localStorage.removeItem('jwt');
this._localStorage.logout('false');
}
}
Đây là lớp LocalStorage tôi:
export class LocalStorage {
public collection$: Observable<Array<string>>;
private _collectionObserver: any;
private _collection: Array<string>;
public loggedIn$ :Observable<boolean>;
private _loggedinObserver: any;
private _loggedIn: Array<string>;
constructor() {
this._collection = new Array<string>;
this._loggedIn = new Array<string>;
this.loggedIn$ = new Observable(observer => {
this._loggedinObserver = observer;
}).share();
this.collection$ = new Observable(observer => {
this._collectionObserver = observer;
}).share();
}
add(value: string) {
this._collection.push(value);
this._collectionObserver.next(this._collection);
}
logIn(value: string){
this._loggedIn.unshift(value);
this._loggedinObserver.next(this._loggedIn);
}
logout(value: string){
this._loggedIn.unshift(value);
this._loggedinObserver.next(this._loggedIn);
}
load() {
this._collectionObserver.next(this._collection);
this._loggedinObserver.next(this._loggedIn);
}
}
Bây giờ khi điều này nạp đầu tiên của tôi không kích hoạt một cách chính xác, nhưng nếu Tôi làm mới trang biến mà giữ loginIn không có gì trong đó, vì vậy menu biến mất. Có 2 vấn đề với điều này, một là tôi thực sự muốn tự động thay đổi một biến trên cập nhật để chỉ giữ một giá trị thay vì phải sử dụng mảng bắt buộc quan sát được. Tôi chỉ có thể sử dụng một quan sát như một mảng?
- Tôi hiểu khi đọc rằng Angular2 không hoạt động $ event để theo dõi các thay đổi đối với các quan sát có thể kích hoạt sự kiện/chức năng. Có cách nào khác để theo dõi một sự thay đổi đối với một quan sát để kích hoạt chức năng hoặc sự kiện không?
Tôi rất muốn có câu trả lời cho câu hỏi của mình về mã của tôi và cách sử dụng nó tốt hơn và hy vọng theo cách ít hacky hơn. Nhưng tôi muốn thậm chí nhiều hơn để có được một sự hiểu biết tốt về Observables/Đối tượng và các nguồn lực tốt. Tôi biết đây là một bài viết dài và rộng, tôi không có bất cứ ai mà tôi có thể đến hoặc yêu cầu giúp đỡ với bất kỳ ai trong số này và nhiều bạn trong số những người trả lời câu hỏi ở đây đã rất hữu ích và giúp mọi người dễ dàng hơn nhiều tôi hiểu các khái niệm.
Cảm ơn!
Đây là cách quá rộng, tôi khuyên bạn nên chia thành các câu hỏi cụ thể hơn trước khi họ đóng câu hỏi này. Đối với các tài nguyên đi, bạn có thể muốn sử dụng [tài liệu phiên bản 5] (https://github.com/ReactiveX/RxJS) thay vì đó là một trong những Angular 2 sử dụng. [EggHead.io] (https://egghead.io/technologies/rx) có video giới thiệu rất tốt để lập trình phản ứng và [Ng-Book 2] (https://www.ng-book.com/2/) có một chương liên quan đến nó sử dụng Angular 2, trong đó có một ví dụ tương tự như những gì bạn đang cố gắng đạt được trong câu hỏi thứ hai của bạn. – Langley