html – Angular2：在内部组件中设置md-fab按钮’position：fixed’

概述我使用原始angular2材质框架中的md-fab-button. 我想设置md-fab-button(用于添加新实体)position：fixed但是我想将按钮放在md-sidenav-layout内的内部组件中,但是如果我这样做那么位置：fixed doesn’工作. 上面的代码： <div class="{{themeService.ActualTheme}}"> <md-siden 我使用原始angular2材质框架中的md-fab-button.
我想设置md-fab-button(用于添加新实体)position：fixed但是我想将按钮放在md-sIDenav-layout内的内部组件中,但是如果我这样做那么位置：fixed doesn’工作.

上面的代码：

<div >    <md-sIDenav-layout  fullscreen>

此类属性仅用于主题应用程序
我也尝试了没有全屏,并设置了“全高”类md-sIDenav-layout到100％高度和绝对,但它不起作用.

首先尝试(位置：固定不起作用)：
    

<button (click)="onPlusClickAction()"  color="accent" md-fab>            <md-icon >add</md-icon>        </button>    </md-sIDenav-layout></div>

而不是路由器插座,内部组件将被替换(标准角度2路由).

现在我试着把md-fab-button放在这里：

<router-outlet></router-outlet>    </md-sIDenav-layout>    <button (click)="onPlusClickAction()"  color="accent" md-fab>        <md-icon >add</md-icon>    </button></div>

如果我这样做,那么位置：固定工作,但现在md-fab-button在md-sIDenav-layout之外,并且当我打开我的sIDenav时,fab-button放在sIDenav上. z-index不起作用,因为fab-button完全消失.

谁有好主意解决这个问题？

先感谢您！

解决方法 固定位置不起作用,因为有一个变换：在md-sIDenav-layout元素上设置的translate3d CSS属性.在这种情况下

the object will act as a containing block for position: fixed elements
that it contains

见https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Material 2项目已经存在一个未解决的问题,要求从sIDenav中删除translate3d值,但到目前为止,Material团队没有解决该问题：https://github.com/angular/material2/issues/998

我遇到了同样的情况,并通过一个非常繁重的解决方案解决了它.我从主要内容中删除了FAB,在我的模板中定义了一个辅助路由器插座(在md-sIDenav-layout之外),为FAB创建了一个独立组件,并在服务中使用Observable将click事件广播到主要组件.

布局

<md-sIDenav-container>    <md-sIDenav #sIDenav mode="sIDe" >        <md-nav-List>            <a md-List-item routerlink="/">                <span md-line>Home</span>            </a>    </md-nav-List>  </md-sIDenav>    <md-toolbar color="primary">        <button md-icon-button (click)="sIDenav.toggle()">            <md-icon >menu</md-icon>        </button>        <span>Angular Material 2 SIDenav with FAB</span>    </md-toolbar>  <router-outlet></router-outlet></md-sIDenav-container><router-outlet name="fab"></router-outlet>

FAB服务

export class FabService {  private actionSource = new Subject<string>();  public actionStream = this.actionSource.asObservable();  public broadcastAction(action: string) {      this.actionSource.next(action);  }}

FAB组件

@Component({    template: '<button md-fab  (click)="actionHandler()"><md-icon>add</md-icon></button>',styles: [`        button.fab {            position: fixed;            bottom: 12px;            right: 12px;        }    `]})export class FabComponent {    constructor(private fabService: FabService) { }    actionHandler() {        this.fabService.broadcastAction('click');    }  }

主要成分

export class MainComponent implements OnInit,OnDestroy {  private subscription: Subscription;  constructor(private fabService: FabService)  { }    ngOnInit(): voID {    this.subscription = this.fabService.actionStream.subscribe(event => this.events.push(event));  }  ngOnDestroy() {    this.subscription.unsubscribe();  }  }

和路由

const routes: Routes = [    { path: '',children: [        { path: '',component: MainComponent},{ path: '',component: FabComponent,outlet: 'fab' }    ]}

完整的工作示例：http://plnkr.co/edit/GLFWfdy2JSXNKefhuNLA?p=preview

总结

以上是内存溢出为你收集整理的html – Angular2：在内部组件中设置md-fab按钮’position：fixed’全部内容，希望文章能够帮你解决html – Angular2：在内部组件中设置md-fab按钮’position：fixed’所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。