Angular 5 - 在不同组件中使用按钮进行状态指示的正确方法

Question

在我的应用程序中，我有两个Angular组件，我们称之为A和B.B用于显示一些内容，A包含几个按钮，用于过滤B的内容。 B中还有一些按钮用于进一步过滤。我想使用按钮作为选择的指示器，例如当B显示猫时，A中的“猫”按钮应该是活动的。我设法让它工作，但组件A总是在刷新后聚焦第一个按钮等。

按钮的实现方式如下：

<div class="panel panel-primary">
  <div class="panel-body">
    <div class="row">
      <div class="col-sm-6">
        <button type="button" class="dash-button btn btn-primary" (click)="foo(cats)" id="c"
                appFocusButton="'c' === selectedId" [class.dash-button]="'c' === selectedId">
          Cats
        </button>
      </div>
      <div class="col-sm-6">
        <button type="button" class="dash-button btn btn-primary" (click)="foo(dogs)" id="d"
                appFocusButton="'d' === selectedId" [class.dash-button]="'d' === selectedId">
          Dogs
        </button>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6">
        <button type="button" class="btn btn-primary" (click)="foo(fish)" id="f"
                appFocusButton="'f' === selectedId" [class.dash-button]="'f' === selectedId">
         Fish
        </button>
      </div>
      <div class="col-sm-6">
        <button type="button" class="btn btn-primary" (click)="foo(birds)" id="b"
                appButtonPrimary [class.dash-button]="'b' === selectedId">
          Birds
        </button>
      </div>
    </div>
  </div>
</div>

我定义了这个自定义指令来进行聚焦：

@Directive({
  selector: '[appFocusButton]'
})
export class FocusButtonDirective {
  constructor(public renderer: Renderer, public elementRef: ElementRef) {
  }

  @Input()
  set myFocus(value: boolean) {
    if (value) {
      this.renderer.invokeElementMethod(
        this.elementRef.nativeElement, 'focus', []);
    }
  }
}

而CSS：

.btn-primary {
  width: 100%;
  height: 60px;
  font-size: x-small;
  white-space:normal;
  background-color: $button-primary;
}
.btn-primary:focus,
.btn-primary:active {
  background-color: $button-primary-active;
}
.btn-primary:disabled {
  background-color: $button-primary-disabled;
}
.right {
  float:right; display:inline; width: 10%;
}
.col-sm-6 {
  padding-right: 0;
  padding-left: 5px;
  padding-bottom: 5px;
}
.panel-body {
  padding-right: 50px;
}
.panel-heading {
  padding-right: 10px;
}
.panel.panel-primary {
  border: none;
}
.icon {
  padding-top: 3px;
  float: right;
}

.input {
  display: none;
}

.dash-button {
  background-color: $button-primary-active;
}

我想我在这里问的问题是，如何阻止这个第一个按钮形式每次都集中注意力。

Answer 1

我最终想通了......我使用的枚举和ID之间存在不一致。像这样的东西：

export enum Options {
  c = 'cat',
  d = 'dog',
  b = 'brd',
  f = 'fish'
}

export enum Options {
  c = 'cat',
  d = 'dog',
  b = 'bird',
  f = 'fish'
}