Question

我正在构建一个富页面，该页面将在页面顶部显示固定位置栏。根据用户活动的不同，我希望在页面顶部堆叠多个条形图，例如：

在此示例中，Bar1可能是站点导航栏，Bar2可能是通知/警告，而Bar3是另一件事。

可以随时在顶部添加或删除任何这些条形图（例如，它们可能仅在用户滚动一定距离时显示。）

由于Angular 2的视图封装以及对组件封装的整体关注，这似乎比我想象的更具挑战性。

传统的HTML方法是在文档的顶部放置一个固定位置的容器，并允许该容器中的所有元素自行定位：

<div style="position: fixed">
  <div>Bar1</div>
  <div>Bar2</div>
  <div>Bar3</div>
</div>

我知道的另一个选项是在我想要的任何地方声明固定位置元素，并使用顶部/左侧CSS属性来确保它们以正确的坐标显示。

我对解决这个问题有任何更好的想法。我一直试图像这项工作一样做出解决方案：

（固定标题组件呈现固定位置容器）

@Component({
  template: `
  <div style="position: fixed">
      <div *ngFor="let element of fixedHeaderService.elements">
          <ng-content="element"></ng-content>
      </div>
  </div>
`}) 
export class FixedHeaderComponent{
  constructor(private fixedHeaderService: FixedHeaderService){}
}

服务跟踪它显示的组件/元素＆＃34;楼上＆＃34;

@Injectable()
export class FixedHeaderService{
  elements: HTMLElement[];

  addToTop(element: HTMLElement){
    this.elements.push(element);
  }
}

包含（部分）模板的通用组件，该模板应显示为FixedHeaderComponent的DOM元素的子元素）

@Component({
  template: '<div #elem>Bar 3</div>'})
  export class Bar3Component{
  @ViewChild('elem') elem: HTMLElement;

  constructor(private fixedHeaderService: FixedHeaderService){}

  // Fires when we want our element moved to the fixed position container
  moveToTopEvent = ():void => {
    this.fixedHeaderService.addToTop(this.elem);
  }
}

这段代码显然无法正常工作 - 这些内容不会以这种方式工作，而这个伪代码会引发一堆额外的问题。但是，一般的想法是，组件可以决定何时需要修复，并以某种方式被推入显示固定项目的组件中。

我的问题，更像是：

我可以继续发展这个想法，提供一种在单个容器中显示固定位置项目的优雅方式，还是注定要失败？

其次，有没有一种更好的方法可以解决这个问题？

ng2：管理多个固定位置的HTML元素

0 个答案: