如何设置嵌套Angular组件的样式？

Question

我想知道执行以下操作的正确/推荐方法是什么：

我有一个特定路线的角度分量。为了举例，我们可以说路线是：

/main-page

当查看此路线时，模板会跨越整个屏幕宽度。现在假设我在此页面中有一个按钮，单击该按钮会转到新的嵌套路径。让我们称这条路线为：

/main-page/with-sidebar

当我点击此按钮时，我希望主页面被挤进屏幕的左侧70％，我希望侧边栏的视图位于右侧30％。

我首次尝试实现这一目标的方法是在包含名为“shrinkable”的主页面的元素上放置一个类，然后放入：

.shrinkable {
    width: 70%;
}

进入我的“with-sidebar”组件的样式表（因为我只想在我实际上在子路径中时应用这种样式。然而问题是Angular（或者它的scss？）修改我的样式表，它只会应用于组件中的元素（或者我的情况下的子组件）。一般来说，这是使组件可重用的一个很好的功能，但在我的情况下它阻止我做我需要做什么。

我怀疑我是以错误的方式解决这个问题。建议？

注意，澄清这是我正在使用的Angular 5.

Answer 1

您可以使用

<a routerLink="child"
[ngStyle]="{'color': router.url === '/sample/child' ? 'red' : 'green' }">
Navigate to Child route</a>

有条件地设计组件。这是我为yoU创建的一个例子：

https://stackblitz.com/edit/angular-vcn94k?file=app%2Fapp.component.html

Answer 2

我通过创建一个＆＃34; shell＆＃34;做了类似的事情。用于固定两个面板的组件。然后使用bootstrap列样式将它们分成两列。

<div class='row'>
    <div class='col-md-4'>
        <pm-product-shell-list></pm-product-shell-list>
    </div>
    <div class='col-md-8'>
        <pm-product-shell-detail></pm-product-shell-detail>
    </div>
</div>

然后我路由到这个shell组件以并排显示两个组件。

结果如下：

您可以在此处找到此应用的完整源代码：https://github.com/DeborahK/Angular-Communication

如果您想将其他组件路由到该位置，也可以使用子路由器插座替换第二个子组件。

<div class='row'>
    <div class='col-md-4'>
        <pm-product-shell-list></pm-product-shell-list>
    </div>
    <div class='col-md-8'>
        <router-outlet></router-outlet>
    </div>
</div>