在 Angular (5) 应用程序中添加浮动按钮的最佳方式是啥？

Posted 2023-03-13

【中文标题】在 Angular (5) 应用程序中添加浮动按钮的最佳方式是啥？

【英文标题】：Which is the preferable way to add a floating button in an Angular (5) application?在 Angular (5) 应用程序中添加浮动按钮的最佳方式是什么？

【发布时间】：2019-02-27 00:51:16

【问题描述】：

我正在 Angular 5 中构建一个应用程序，它有 3 个主屏幕，我们可以使用选项卡进行导航。我使用 Angular 路由在这 3 个视图之间切换，并为这 3 个视图中的每一个添加了单独的组件。现在我想在屏幕底部添加一个浮动按钮，单击该按钮会打开一个带有关闭按钮的新屏幕。注意：这个按钮应该在整个应用程序中通用，即使屏幕发生变化，我也不应该看到这个按钮在每次屏幕加载后消失并重新出现。

这里的主要疑问是添加按钮的最佳方式是什么？

浮动按钮模块 浮动按钮模板 还有其他的吗？

我很擅长为此创建前端以及其中发生的进一步操作。但想知道添加该按钮功能的最佳（建议）做法。

另外请解释基本框架以及您建议这样做的原因。

谢谢

【问题讨论】：

只需创建一个浮动按钮组件，并将其添加到包含您的路由器插座的 html 文件中

【参考方案1】：

浮动按钮只是一个应用了一些 CSS 的按钮。你不需要任何特殊的 Angular 概念来实现它。

由于您的要求是该按钮在所有屏幕上都保持不变，即使 Angular 路由发生更改，这意味着您希望此按钮放置在您在应用程序中最顶部的 <router-outlet> 旁边，该按钮通常位于AppComponent 的模板（但可能因您的结构而异）。

所以只需将按钮放在那里并设置样式。

@Component(
  selector: 'app-root',
  template: `
    <router-outlet></router-outlet>
    <button class="float" (click)="onFloatClick()">Icon</button>
  `,
  styles: `
    .float 
      position: fixed;
      bottom: 1rem;
      right: 1rem;
      width: 1.5em;
      height: 1.5em;
    
  `,
)
export class AppComponent 
  public onFloatClick () 
    // do your magic
  

【讨论】：

有什么方法可以让我在组件类中做这样的事情 - $('.float').on('click', (function()dosomething)) 而不是添加按钮中的（单击）并在组件中实现该方法？

如果我没记错的话，Renderer 是做上述的方法吗？

为什么要使用第一个示例而不是第二个示例？整个创意模板就是逃避第一种做事方式。

如果不想碰DOM，想把所有的点击事件都写在一个地方，单独写而不是写(click)/(focus)岂不是很有帮助/（更改）等在一行中。独立编写模板和事件侦听器会更容易。这样我就可以回来并为按钮编写一个额外的事件侦听器而不会干扰模板.. 对吗？