javascript - 基于路由的 CSS 样式 - Angular2

标签 javascript css angular

在主页上,我希望我的 Logo 是原来的 3 倍大。然后,当您选择一个菜单选项并且路由器打开一个不同的页面时,它应该再次缩小到正常大小。

我试图通过为页面名称设置一个变量并根据该变量更改 CSS 来做到这一点。

<li [class.homeLogo]="home === 'Home'">

问题是,如果有人在浏览器 URL 中键入路由而不是单击菜单按钮,那么整个过程就会中断。如果刷新页面,它也会重置。

有没有办法访问当前显示的路由,以便我可以确保 CSS 绑定(bind)到页面而不是变量?

最佳答案

$location 服务解析浏览器地址栏中的 URL(基于 window.location)并使该 URL 可用于您的应用程序。地址栏中 URL 的更改会反射(reflect)到 $location 服务中,而 $location 的更改会反射(reflect)到浏览器地址栏中。

$location 服务:

在浏览器地址栏中公开当前 URL,以便您可以

  • 观察 URL。

  • 更改网址。

在用户访问时将 URL 与浏览器同步

  • 更改地址栏。

  • 点击后退或前进按钮(或点击历史链接)。

  • 点击链接。

将 URL 对象表示为一组方法(协议(protocol)、主机、端口、路径、搜索、哈希)。

有关详细信息,请参阅开发人员指南:Using $location

关于javascript - 基于路由的 CSS 样式 - Angular2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37198911/

相关文章:

javascript - 强制 d3 折线图忽略空值

jquery - 在嵌套函数中传递父函数参数?

javascript - 使用javascript在静态HTML页面上突出显示给定的字符串

typescript - Angular 2 typescript Unicode(阿拉伯语)文本支持

angular - 输入中的值在 Angular 2 中未绑定(bind)

javascript - 在数字范围内自动生成年份

php - 在 HTML 表格中每 n 个单元格创建一个新行

javascript - Css onclick 改变类

javascript - 带悬停的 CSS 动态导航 - 如何让它在 iOS Safari 中工作?

javascript - Angular 2 中的 Redux 与服务