Angular2 + - использовать один и тот же компонент несколько раз с возможностью управления состоянием

Question

Я изучаю Angular 7 и пытаюсь найти лучшие практики.Спасибо за любую помощь!

У меня есть небольшой компонент user-list.component.ts, который содержит только поле выбора, заполненное пользователями.Я хочу использовать этот компонент дважды в большем компоненте.Я хочу управлять состоянием для первого использования, так что, если я загружаю другое представление и возвращаюсь к этому представлению, я могу установить первое использование назад для ранее выбранного пользователя.Я не хочу управлять государством для второго использования.Выбор в любом использовании должен быть независимым от другого.Я использую NgRx для управления государством.При первом использовании currentUser var устанавливается подпиской на хранилище NgRx.При втором использовании переменная currentUser устанавливается напрямую.

Мое рабочее решение - установить переменную Boolean Input () в user-list.component.ts.Если для этой переменной задано значение 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;
      }
    }
  }
}