Javascript 如何判断哪个组件当前处于活动状态

我试图创建一个设置按钮，根据用户当前查看的组件动态更改其内容。我不确定这样做的标准做法是什么。我认为正确的方法是使用某种类型的内置角度指令，告诉我当前正在使用哪个路由器链接，然后在设置组件模板中使用该指令，使用*ngIf更改DOM。我可以读取URL并这样做，但它似乎不正确。我想我可以在每个组件中添加一个“isAlive”标志，但对于大多数网站来说，这似乎是一个非常标准的工作，所以我猜这也不是正确的解决方案。有没有关于代码示例的建议

下面是一个示例父组件模板（应用程序组件）

清单


其他组件

这是我要说的设置模板

    <div *ngIf="someRouterThing.checklistComponent.Active" class="settings">
      <div class="panel-body navbar navbar-inverse bg-primary">
          <!-- Rounded switches -->
        <div>
          <label class="switch">
              <input type="checkbox" [checked]="checklistSettings.hideCheckedEnabled" (change)="toggleHideChecked()">
              <span class="slider round"></span>
          </label> Hide Checked
        </div>
        <div>
            <label class="switch">
                <input type="checkbox" [checked]="checklistSettings.hideHiddenEnabled" (change)="toggleHideHidden()">
                <span class="slider round"></span>
            </label> Hide Hidden
        </div>
      </div>
    </div>

    <div *ngIf="someRouterThing.otherComponent.Active class="settings">
       todo- add settings stuff that is different from above
    </div>

隐藏检查
隐藏
您可以在组件的构造函数中分配一个布尔变量并将其更改为true。然后在视图部分（app.component.html）中调用该布尔值

每当用户进入/查看该页面时，构造函数中分配的值将传递到查看页面（app.component.html）。您可以在*ngIf中分配该值
 您可以创建一个服务来跟踪要显示的选项

该服务可能看起来像这样：

@Injectable()
export class OptionsVisibilityService {
    checklistOptionsVisible = new BehaviorSubject<boolean>(false);        
    otherOptionsVisible = new BehaviorSubject<boolean>(false);
}

使可见性服务在显示选项的组件中可用：

export class OptionsButtonComponent {

    checklist$: Observable<boolean>;
    other$: Observable<boolean>;
    constructor(optionsVisibility: OptionsVisibilityService) {
        this.checklist$ = optionsVisibility.checklistOptionsVisible.asObservable();
        this.other$ = optionsVisibility.otherOptionsVisible.asObservable();
    }
}

导出类选项按钮组件{
检查表$：可观察；
其他$：可见；
构造函数（选项可见性：选项可见性服务）{
this.checklist$=optionsVisibility.checklistOptionsVisible.asObservable（）；
this.other$=optionsVisibility.otherOptionsVisible.asObservable（）；
}
}

然后在模板中使用它：

<div *ngIf="checklist$ | async">
    <!-- Show checklist options -->

</div>
<div *ngIf="other$ | async">
    <!-- Show other options -->
</div>

<router-outlet (activate)="onActivate($event)"></router-outlet>

路由器出口有一个
激活
事件，加载的组件作为
$event
参数。您可以使用它来了解当前加载的组件，如中所示

在模板中：

<div *ngIf="checklist$ | async">
    <!-- Show checklist options -->

</div>
<div *ngIf="other$ | async">
    <!-- Show other options -->
</div>

<router-outlet (activate)="onActivate($event)"></router-outlet>

但每当用户离开时，该值都需要设置为false。我可以把它放在ngondstroy（）中，但它总是保证运行吗？我讨厌标志设置不正确，因为生命周期事件没有运行。我建议使用路由器出口。请参阅关于路由。@ConnorsFan我确实在appcomponent中使用了路由器出口。但这是我可以用来告诉“使用哪个组件来代替”的东西吗。这就是我需要知道的，这样我就可以根据用户所在的组件更改设置菜单，您可以处理路由器出口的
activate
事件，以了解加载了哪个组件，如所示。不确定这是否是你想要的…@ConnorsFan可能就是这样。你想写个答案让我接受吗？我明天就试试。你有机会试试吗？看起来会有用的。我唯一的问题是：是否保证在组件未使用时调用ngondery（）？
export class AppComponent {

  routerOutletComponent: object;
  routerOutletComponentClassName: string;

  onActivate(event: any): void {
    this.routerOutletComponent = event;
    this.routerOutletComponentClassName= event.constructor.name;
  }
}