Angular2 +-多次使用同一组件,并带有选项来管理状态

时间:2018-11-26 22:33:52

标签: angular ngrx angular-components

我正在学习Angular 7,并试图找出最佳实践。谢谢您的帮助!

我有一个小组件user-list.component.ts,它仅包含一个填充有用户的选择框。我想在较大的组件中使用此组件两次。我想管理第一次使用的状态,以便在加载另一个视图并返回到该视图时,可以将第一次使用设置回先前选择的用户。我不想管理第二次使用的状态。两种用途中的选择均应独立于另一种。我正在使用NgRx来管理状态。在第一次使用时,currentUser var由NgRx存储的订阅设置。第二次使用时,直接设置currentUser变量。

我的工作解决方案是在user-list.component.ts中设置一个布尔Input()变量。如果将此变量设置为true,那么我知道要管理状态。

我的问题:

  1. 这是可以接受的做法吗?

  2. 他们是这样做的更好方法吗?将我指向相关文档或告诉我要搜索的内容。

app.component.html

<user-list [manageState]="true"></user-list>
<user-list></user-list>

user-list.component.ts

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

0 个答案:

没有答案