我正在学习Angular 7,并试图找出最佳实践。谢谢您的帮助!
我有一个小组件user-list.component.ts,它仅包含一个填充有用户的选择框。我想在较大的组件中使用此组件两次。我想管理第一次使用的状态,以便在加载另一个视图并返回到该视图时,可以将第一次使用设置回先前选择的用户。我不想管理第二次使用的状态。两种用途中的选择均应独立于另一种。我正在使用NgRx来管理状态。在第一次使用时,currentUser var由NgRx存储的订阅设置。第二次使用时,直接设置currentUser变量。
我的工作解决方案是在user-list.component.ts中设置一个布尔Input()变量。如果将此变量设置为true,那么我知道要管理状态。
我的问题:
这是可以接受的做法吗?
他们是这样做的更好方法吗?将我指向相关文档或告诉我要搜索的内容。
<user-list [manageState]="true"></user-list>
<user-list></user-list>
import { Component, OnDestroy, Input, OnInit } from '@angular/core';
// RxJS
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
// NgRx
import { Store, select } from '@ngrx/store';
import * as stateRoot from '../state/app.state';
import * as userListActions from './state/user-list.actions';
import * as userListReducer from './state/user-list.reducer';
// Test Data
import * as testData from '../test-data/user';
@Component({
selector: 'user-list',
templateUrl: './user-list.component.html' // selectBox with users var for data and onUserChanged() event
})
export class UserListComponent implements OnDestroy, OnInit {
@Input() manageState = false;
users: testData.User[];
currentUser = 0;
private unsubscribe: Subject<void>;
constructor(private store: Store<stateRoot.State>) {
// Get sorted users from test data
this.users = testData.users.sort((a, b) => a.Name.localeCompare(b.Name));
}
ngOnInit(): void {
if (!this.manageState) { return; }
// Init second observable to handle unsubscribing
this.unsubscribe = new Subject();
this.store.pipe(select(userListReducer.getCurrentUserId),
takeUntil(this.unsubscribe))
.subscribe(
userId => this.currentUser = userId
);
}
ngOnDestroy(): void {
// Unsub
if (this.unsubscribe) {
this.unsubscribe.next();
this.unsubscribe.complete();
}
}
onUserChanged(e): void {
if (e.value !== null && e.value !== undefined && e.value > 0) {
if (this.manageState) {
this.store.dispatch(new userListActions.SetCurrentUser(e.value));
} else {
this.currentUser = e.value;
}
} else {
if (this.manageState) {
this.store.dispatch(new userListActions.SetCurrentUser(0));
} else {
this.currentUser = 0;
}
}
}
}