根据路线设置Angular2组件的样式

时间:2017-01-20 18:46:26

标签: css angular angular-routing

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

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

任何人都可以帮忙吗?

1 个答案:

答案 0 :(得分:3)

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

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

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

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

使用参数'在'路线定义下的路线参数can be found here上的信息头。 如果我误解了你的问题,请告诉我:)。