Question

我使用原始angular2材质框架中的md-fab-button。我想设置md-fab-button（用于添加新实体）jenkins但是我想将按钮放在position: fixed内的内部组件中但是如果我这样做那么{{1}不起作用。

上面的代码：

md-sidenav-layout

此类属性仅用于主题应用程序我也尝试过没有全屏，并设置了班级＆＃34;全高＆＃34; position: fixed到100％的高度和绝对值，但它不起作用。

首先尝试（<div class="{{themeService.ActualTheme}}"> <md-sidenav-layout class="full-height" fullscreen>不起作用）：

md-sidenav-layout

而不是position: fixed内部组件将被替换（标准angular2路由）。

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

        <button (click)="onPlusClickAction()" class="add-group-button" color="accent" md-fab>
            <md-icon class="md-24 plus-icon">add</md-icon>
        </button>

    </md-sidenav-layout>
</div>

如果我这样做，那么router-outlet可以正常工作，但现在md-fab按钮位于<router-outlet></router-outlet> </md-sidenav-layout> <button (click)="onPlusClickAction()" class="add-group-button" color="accent" md-fab> <md-icon class="md-24 plus-icon">add</md-icon> </button> </div>之外，并且当我打开我的sidenav时，fab-button位于sidenav上方。 position: fixed无法正常工作，因为fab-button完全消失。

有没有人有好主意解决这个问题？

提前谢谢！

Answer 1

固定位置不起作用，因为transform: translate3d元素上设置了md-sidenav-layout CSS属性。在这种情况下

该对象将充当position：fixed元素的包含块它包含

请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Material 2项目已经存在一个未解决的问题，要求从translate3d中删除sidenav值，但到目前为止，材料小组尚未解决此问题：https://github.com/angular/material2/issues/998

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

<强>布局

<md-sidenav-container>
    <md-sidenav #sidenav mode="side" class="app-sidenav">
        <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 class="icon-40">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 class="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

Answer 2

我遇到了同样的问题。经过大量的研究，我发现了两个很好的解决方案：

选项1：

您可以将display: flex属性添加到md-sidenav组件和md-sidenav-content。请查看以下工作示例：http://plnkr.co/edit/VItn3Y2AaTzpzIykTTyH?p=preview

选项2：

正如@AndrásSzepesházi所说，主要问题来自transform: translate3d属性，因此最简单的解决方案是删除它：

.md-sidenav-content {
    transform: none !important;
}

注意：请检查transform: translate3d(0,0,0)到底在做什么。这是一个很好的答案：https://stackoverflow.com/a/18529444/2765346

Angular2：设置md-fab按钮＆＃39; position：fixed＆＃39;在内部组件中

2 个答案: