在主页上,我希望我的 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/