【问题标题】:Styling Angular2 components based on the route基于路由样式化 Angular2 组件
【发布时间】:2017-01-20 18:46:25
【问题描述】:

我在 2 条路线中使用了一个名为“SearchComponent”的组件。在第一条路线中,组件以某种方式设置样式 - 例如,有 3 个输入文本为 display:block,因此它们相互堆叠。在另一条路线中,我希望 3 个输入文本是内联块。

问题是,我可以使用路由来有条件地更改组件样式吗? 我希望 @Component 装饰器具有一些条件逻辑功能,但根据我的阅读,这是不可能的。如果是这种情况,那么我可以使用单独的 styleUrl 路径。

有人可以帮忙吗?

【问题讨论】:

    标签: css angular angular-routing


    【解决方案1】:

    您是否考虑过使用路由参数?您可以在路线中使用一些变量作为样式的条件。例如:

     https://fooServer/fooApp/#/main/YourComponent;type=search1
    

    这里的变量type 可以是字符串、布尔值等。您可以在前一个组件的路由更改期间设置它。

    然后在ngOnInit() 中调用this._route.snapshot.params['type']; 来获取路由参数中的值。然后在模板中,添加标签[attr.class]="type == search1? search1Class : search2Class"

    “带有参数的路由定义”标题下的路由参数can be found here 的信息。 如果我误解了你的问题,请告诉我:)

    【讨论】:

    • 很棒的酱汁。完美运行。谢谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-04-11
    • 1970-01-01
    • 1970-01-01
    • 2022-01-04
    • 2020-11-24
    • 2019-08-23
    相关资源
    最近更新 更多