Angular2：在内部组件中设置 md-fab 按钮“位置：固定”答案

【问题标题】：Angular2: set md-fab button 'position: fixed' in inner componentAngular2：在内部组件中设置 md-fab 按钮“位置：固定”
【发布时间】：2017-04-22 12:19:02
【问题描述】：

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

以上代码：

<div class="{{themeService.ActualTheme}}">
    <md-sidenav-layout class="full-height" fullscreen>

这个类属性仅用于应用程序主题我也尝试过不使用全屏并将 md-sidenav-layout 的“全高”类设置为 100% 高度和绝对值，但它不起作用。

第一次尝试（position: fixed 不起作用）：

        <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（标准 angular2 路由）。

现在我尝试将 md-fab-button 放在这里：

        <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>

如果我这样做，那么 position: fixed 可以工作，但是现在 md-fab 按钮位于 md-sidenav-layout 之外，并且总是当我打开我的 sidenav 时，fab 按钮位于 sidenav 上。 z-index 不起作用，因为那时 fab 按钮会完全消失。

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

提前谢谢你！

【问题讨论】：

标签： html css angular angular-material2

【解决方案1】：

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

选项 1：

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

选项 2：

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

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

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

【讨论】：

帮了我很多。谢谢！
在 2.0.0-beta.10 版本中可以这样工作：.mat-drawer-content { transform: none !important; }

【解决方案2】：

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

对象将充当位置的包含块：固定元素它包含

见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 将点击事件广播到主要组件.

布局

<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

【讨论】：