使用Angular 2 Routes处理flexbox子级

Question

我有一个在Angular 2中构建的网页。导航栏中的路由正在通过Angular的路由器处理。我有一个<main>区域，其中所有子组件都通过每个相应的路径出现，充当flexbox容器。但是，我希望每个flex-child / router组件都有不同的弹性排列。

问题是，在每个特定routerLink处于活动状态之前，我无法确定flex-child的组织。但是，我不能在其自己的组件样式中设置子元素的弹性位置;您必须通过flex容器执行此操作，在本例中为<main>。例如，请考虑此导航：

<ul>
            <li class="dropdown">
                About
                <ul class="dropdown-content">
                    <li routerLink="/members">Members</li>
                    <li routerLink="/history">History</li>
                </ul>
            </li>
            <li routerLink="/media">Media</li>
            <li routerLink="/merch">Merchandise</li>
            <li routerLink="/aaru">AARU</li>
</ul>
<main>
  This is where my ng-components go
  <router-outlet></router-outlet>
</main>

此模板位于我的主要组件AppComponent中。我们要说/members的样式为{ justify-content: center }，/merch为{ justify-content: flex-start }。

Angular中有没有办法我点击相应的<main>后可以在routerLink上指定样式/切换css类？