首页 文章

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

提问于
浏览 次
1

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

这是一个示例父组件模板（app组件）

<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>
javascript html angular

3 回答

  • 1

    路由器插座具有 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;
  }
}
    回复于
  • 0

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

    每当用户进入/查看该页面时，分配给构造函数的值将传递给视图页面（app.component.html） . 您可以在* ngIf中分配该值 .

    回复于
  • 0

    您可以创建一个服务，跟踪要显示的选项 .

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

    @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>
    回复于

相关问题