我使用此处提供的示例来设置响应式导航栏
https://theinfogrid.com/tech/developers/angular/responsive-navbar-angular-flex-layout/
我的代码看起来很相似
<div style="height: 85vh;">
<mat-toolbar color="primary" mat-scroll-shrink>
<span>{{title}}</span>
<span class="example-spacer"></span>
<div fxShow="true" fxHide.lt-md="true">
<!-- The following menu items will be hidden on both SM and XS screen sizes -->
<a href="#" mat-button>Home</a>
<a href="#" mat-button>About</a>
<a href="#" mat-button>Services</a>
<a href="#" mat-button>Portfolio</a>
<a href="#" mat-button>Start</a>
<a href="#" mat-button>FAQ</a>
<a href="#" mat-button>Blog</a>
<a href="#" mat-button>Contact</a>
</div>
<div fxShow="true" fxHide.gt-sm="true">
<a href="#" (click)="sidenav.open()">Show Side Menu</a>
</div>
</mat-toolbar>
<mat-sidenav-container fxFlexFill class="example-container">
<mat-sidenav #sidenav fxLayout="column">
<div fxLayout="column">
<a (click)="sidenav.close()" href="#" mat-button>Close</a>
<a href="#" mat-button>Home</a>
<a href="#" mat-button>About</a>
<a href="#" mat-button>Services</a>
<a href="#" mat-button>Portfolio</a>
<a href="#" mat-button>Start</a>
<a href="#" mat-button>FAQ</a>
<a href="#" mat-button>Blog</a>
<a href="#" mat-button>Contact</a>
</div>
</mat-sidenav>
<mat-sidenav-content fxFlexFill>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
<p>Demoing some content to make this thing scroll</p>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
我希望发生的事情是在向下滚动时将mat-toolbar缩小,这在很多网站中很常见,例如:
我不会发布其余的角度5代码,只需按照示例重新创建 - 它非常快。
我看过这里的资料网站
https://material.angular.io/components/toolbar/overview
但是对于如何添加它并没有多少解释,我对这些东西很陌生。有没有人知道如何自定义这个以使工具栏缩小,基于滚动?
答案 0 :(得分:10)
Angular CDK v7弃用了ScrollDispatchModule
。请改用ScrollingModule
。
我创建了一个Stackblitz,其工具栏在向下滚动时缩小。
CdkScrollDispatcher
服务来响应滚动事件ScrollDispatchModule
。import {ScrollDispatchModule} from '@angular/cdk/scrolling';
cdkScrollable
相关的容器,此处为mat-sidenav-content
。 <mat-sidenav-content fxFlexFill cdkScrollable>
ngOnInit
中的事件,获取scrollTop
位置并设置一个标志,如果它大于某个阈值:private readonly SHRINK_TOP_SCROLL_POSITION = 50;
shrinkToolbar = false;
constructor(private scrollDispatcher: ScrollDispatcher,
private ngZone: NgZone) { }
ngOnInit() {
this.scrollDispatcher.scrolled()
.pipe(
map((event: CdkScrollable) => event.getElementRef().nativeElement.scrollTop)
)
.subscribe(scrollTop => this.ngZone.run(() => this.shrinkToolbar = scrollTop > this.SHRINK_TOP_SCROLL_POSITION ? true : false));
}
您需要使用ngZone
运行此操作,因为scrolled()
的{{1}}事件默认情况下在Angular之外运行。没有它,ChangeDetection将无法运行,您的模板也不会更新。
ScrollDispatcher
<mat-toolbar color="primary" [ngClass]="{'shrink-toolbar': shrinkToolbar}">
在official docs中找到有关滚动服务的更多信息。