Styling Angular2 компоненты по маршруту

Question

Я использую компонент под названием «SearchComponent» в 2-х маршрутах. На первом маршруте компонент определен определенным образом - например, есть 3 входных текста, которые являются display:block, поэтому они складываются друг против друга. На другом маршруте я хотел бы, чтобы 3 входных текста были встроенными блоками.

Вопрос в том, можно ли использовать маршрутизацию для условного изменения стиля компонентов? Я надеялся, что у декоратора @Component есть определенные возможности условной логики, но из моих чтений это невозможно. Если бы это было так, то я мог бы просто использовать отдельный путь styleUrl.

Может ли кто-нибудь помочь в этом?

Answer 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 в разделе «Определение маршрута с заголовком параметра». Дайте мне знать, если я неправильно понял ваш вопрос :)