根据路线设置 Angular2 组件的样式
Styling Angular2 components based on the route
我在 2 条路线中使用了一个名为 'SearchComponent' 的组件。在第一个路由中，组件以某种方式设置样式——例如，有 3 个输入文本 display:block，因此它们相互堆叠。在另一条路线中，我希望 3 个输入文本是行内块。
问题是，我可以使用路由来有条件地更改组件样式吗？
我希望 @Component 装饰器具有一些条件逻辑功能，但根据我的阅读，这是不可能的。如果是这样的话，那么我可以只使用一个单独的 styleUrl 路径。
有人可以帮忙吗？
你考虑过使用路由参数吗？您可以在路由中使用一些变量作为样式的条件。例如：
https://fooServer/fooApp/#/main/YourComponent;type=search1
这里的变量type可以是字符串、布尔值等。您可以在从前一个组件更改路由期间设置它。
然后在 ngOnInit() 你会调用 this._route.snapshot.params['type']; 来获取路由参数中的值。然后在模板中，添加标签 [attr.class]="type == search1? search1Class : search2Class"
'Route definition with a parameter' header 下的路由参数 can be found here 的信息。
如果我误解了你的问题，请告诉我:)
我在 2 条路线中使用了一个名为 'SearchComponent' 的组件。在第一个路由中，组件以某种方式设置样式——例如，有 3 个输入文本 display:block，因此它们相互堆叠。在另一条路线中，我希望 3 个输入文本是行内块。
问题是，我可以使用路由来有条件地更改组件样式吗？ 我希望 @Component 装饰器具有一些条件逻辑功能，但根据我的阅读，这是不可能的。如果是这样的话，那么我可以只使用一个单独的 styleUrl 路径。
有人可以帮忙吗？
你考虑过使用路由参数吗？您可以在路由中使用一些变量作为样式的条件。例如：
https://fooServer/fooApp/#/main/YourComponent;type=search1
这里的变量type可以是字符串、布尔值等。您可以在从前一个组件更改路由期间设置它。
然后在 ngOnInit() 你会调用 this._route.snapshot.params['type']; 来获取路由参数中的值。然后在模板中，添加标签 [attr.class]="type == search1? search1Class : search2Class"
'Route definition with a parameter' header 下的路由参数 can be found here 的信息。 如果我误解了你的问题，请告诉我:)