Как узнать, какой компонент в данный момент активен Angular 5

Question

Я пытаюсь создать кнопку настроек, которая динамически изменяет свое содержимое в зависимости от того, какой компонент пользователь просматривает в данный момент. Я не уверен, что стандартная практика для этого. Я думаю, что правильным способом было бы использовать некоторый тип встроенной угловой директивы, которая сообщает мне, какая ссылка маршрутизатора используется в настоящее время, а затем использовать это в шаблоне компонента настроек, чтобы изменить DOM с помощью * ngIf. Я мог бы прочитать URL и сделать это таким образом, но это кажется неправильным. Я полагаю, что я мог бы поставить флаг «isAlive» в каждом компоненте, но это кажется большой работой для чего-то такого стандартного для большинства веб-сайтов, поэтому я предполагаю, что это тоже не правильное решение. Любые предложения с примером кода?

Вот пример шаблона родительского компонента (компонента приложения)

<nav ="navbar navbar-toggleable-md navbar-inverse bg-primary fixednav">
            <li class="nav-item">
                <a class="nav-link" routerLink="/checklist" routerLinkActive="active">
                   Checklist
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerLink="/otherComponent" routerLinkActive="active">
                   OtherComponent
                </a>
            </li>
</nav>

Вот шаблон настроек, о котором я говорю.

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

Answer 1

Вы можете создать сервис, который будет отслеживать, какие опции показывать.

Сервис может выглядеть примерно так:

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

В ваших компонентах вы можете обновить состояние в событиях жизненного цикла OnInit и OnDestroy:

@Component({/** ... */})
export class ChecklistComponent implements OnInit, OnDestroy {
    constructor(private optionsVisibility: OptionsVisibilityService) {
    }

    ngOnInit() {
        this.optionsVisibility.checklistOptionsVisible.next(true);
    }
    ngOnDestroy() {
        this.optionsVisibility.checklistOptionsVisible.next(false);
    }
}

Сделать службу видимости доступной в компоненте, где отображаются параметры:

export class OptionsButtonComponent {

    checklist$: Observable<boolean>;
    other$: Observable<boolean>;
    constructor(optionsVisibility: OptionsVisibilityService) {
        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>

Answer 2

На выходе маршрутизатора есть событие activate с загруженным компонентом в качестве параметра $event. Вы можете использовать его, чтобы узнать, какой компонент загружен в данный момент, как показано в this stackblitz .

В шаблоне:

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

В коде компонента:

export class AppComponent {

  routerOutletComponent: object;
  routerOutletComponentClassName: string;

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

Answer 3

Вы можете присвоить логическую переменную и изменить ее на true внутри конструктора компонента. Затем вызвать это логическое значение в части представления (app.component.html).

Всякий раз, когда пользователь переходит / просматривает эту страницу, значение, которое назначается в конструкторе, передается на страницу просмотра (app.component.html). Вы можете присвоить это значение в * ngIf.