javascript - 当页面标题在 sidenav 内容中不可见时，在工具栏中显示文本

我做了这个功能，你基本上可以在stackblitz中看到它，我对标题做了一个引用（检查HTML中的第39行），检查这个标题是否可见的逻辑是：

this.titleIsVisible =
      bounding.top >= 0 &&
      bounding.left >= 0 &&
      bounding.right <=
        (window.innerWidth || document.documentElement.clientWidth) &&
      bounding.bottom <=
        (window.innerHeight || document.documentElement.clientHeight);

监听我@HostListener("window:scroll", ["$event"])在 TS 和我刚刚使用的 HTML 中使用的滚动事件（滚动）。要查看这一点，请检查 TS 中的第 28 行和 HTML 中的第 30 行。

以防万一，这是代码。

import { Component, ViewChild, ElementRef, HostListener } from "@angular/core";
import {
  BreakpointObserver,
  Breakpoints,
  BreakpointState
} from "@angular/cdk/layout";
import { FormControl } from "@angular/forms";
import { Observable } from "rxjs";
import { map } from "rxjs/operators";
/** @title Responsive sidenav */
@Component({
  selector: "sidenav-responsive-example",
  templateUrl: "sidenav-responsive-example.html",
  styleUrls: ["sidenav-responsive-example.css"]
})
export class SidenavResponsiveExample {
  @ViewChild("drawer") drawer: any;
  @ViewChild("title") title: ElementRef;

  public selectedItem: string = "";
  public isHandset$: Observable<boolean> = this.breakpointObserver
    .observe(Breakpoints.Handset)
    .pipe(map((result: BreakpointState) => result.matches));
  public titleIsVisible: boolean = true;

  constructor(private breakpointObserver: BreakpointObserver) {}

  @HostListener("window:scroll", ["$event"])
  onScroll() {
    const bounding = this.title.nativeElement.getBoundingClientRect();
    this.titleIsVisible =
      bounding.top >= 0 &&
      bounding.left >= 0 &&
      bounding.right <=
        (window.innerWidth || document.documentElement.clientWidth) &&
      bounding.bottom <=
        (window.innerHeight || document.documentElement.clientHeight);

  }

  closeSideNav() {
    if (this.drawer._mode == "over") {
      this.drawer.close();
    }
  }
}

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)">
    <mat-toolbar color="primary" style="margin-top:30px;"> Business</mat-toolbar>

    <mat-nav-list >
      <mat-list-item  (click)="closeSideNav()">
        <mat-icon matListIcon>home</mat-icon>
        <a matLine>Home</a>
      </mat-list-item>

      <mat-list-item (click)="closeSideNav()">
        <mat-icon matListIcon>person</mat-icon>
        <a matLine>Customers</a>
      </mat-list-item>

      <mat-list-item (click)="closeSideNav()">
        <mat-icon matListIcon>group_work</mat-icon>
        <a matLine>employees</a>
      </mat-list-item>

      <mat-list-item (click)="closeSideNav()">
        <mat-icon matListIcon>business</mat-icon>
        <a matLine>business</a>
      </mat-list-item>

    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content (scroll)="onScroll($event)">
    <mat-toolbar color="primary">
      <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <h1 *ngIf=!titleIsVisible>TITLE</h1>
    </mat-toolbar>

    <div class="ylb-app-content">
      <h1 #title >TITLE</h1>
      <div >
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

      </div>
      <ng-content>



      </ng-content>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

javascript - 当页面标题在 sidenav 内容中不可见时，在工具栏中显示文本

问题描述

解决方案

推荐阅读