Angular2:在内部组件中设置md-fab按钮'position:fixed'

Question

我使用原始angular2材质框架中的md-fab-button.我想设置md-fab-button(用于添加新实体),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-button md-sidenav-layout在我之外,并且当我打开我的sidenav时,fab-button放在sidenav上.z-index不起作用,因为fab-button完全消失.

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

先感谢您!

Answer 1

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

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

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

Material 2 项目已经存在一个未解决的问题，要求translate3d从 中删除该值sidenav，但到目前为止，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