Question

我目前正在开发 Angular 2 网站，并且在使用SideNav组件时遇到了一些问题。

SideNav 可以有3种模式，这些模式似乎都无法改变打开Sidenav时发生的情况。我打算在打开后显示背景。

sideNav确实打开了，但背景并没有打开。出现。

应用的根目录是 md-sidenav容器。 SideBar组件也将传递给NavBar组件，因为在那里定义了打开按钮。

请注意，我还尝试将SideBar组件置于<md-sidenav-container>

之外

<md-sidenav-container>
    <sidebar #sideBarComponent></sidebar>
    <navbar [sideBar]=sideBarComponent></navbar>
    <router-outlet></router-outlet>
</md-sidenav-container>

SidNnav目前包含2个链接，并设置为模式＆＃34; over ＆＃34; （应该在主要内容上创建一个SideNav和背景幕）

<md-sidenav #sideBar mode="over">
    <md-nav-list>
        <a md-list-item routerLink="/home" (click)="sideBar.close()" routerLinkActive="active-link">
            <md-icon md-list-icon>home</md-icon>
            <p md-line>Home</p>
        </a>
        <a md-list-item routerLink="/users" (click)="sideBar.close()" routerLinkActive="active-link">
            <md-icon md-list-icon>account_circle</md-icon>
            <p md-line>Users</p>
        </a>
    </md-nav-list>
</md-sidenav>

使用chrome的开发人员工具检查页面会显示创建了一个背景（<div class="md-sidenav-backdrop"></div>）并覆盖了整个页面，但是它被设置为隐藏并且由于没有功能性CSS而无效适用于它。（只设置固定的宽度，高度和位置，没有任何可见的改变页面）

prebuild-css有一个背景颜色标签，但需要.md-sidenav-shown：

.md-sidenav-backdrop.md-sidenav-shown {
    background-color: rgba(0, 0, 0, .6)
}

是否有任何可能导致此行为发生的事情？我找到的教程和示例都没有复杂，所以我认为这是由于我的设置。

相关的库和版本（所有webjars）：

Angular 2.4.1
   common
   core
   compiler
   forms
   http
   platform-browser
   platform-browser-dynamic
   router
Angular-Material 2.0.0-Beta.1
SystemJs 0.19.41
Core-js 2.4.1
Reflect-Metadata 0.1.8
Typescript 2.1.4
RxJs 5.0.1
HammerJS 2.0.6
Zone.js 0.7.4

Answer 1

您似乎无法将md-sidenav放入组件中，因为md-sidenav-container和子md-sidenav之间没有链接。 Md-sidenav-container使用@ContentChildren来访问md-sidenav个实例。

因此，md-sidenav-container和md-sidenav之间必须存在直接的亲子关系。

Answer 2

为了使your.component.css中定义的CSS范围仅限于该组件，Angular处理CSS / SCSS / SASS文件并添加＆＃34;属性＆＃34;选择器到该文件中定义的每个CSS规则。

在您的情况下，它会将您的.md-sidenav-backdrop.md-sidenav-shown {...} CSS规则转换为以下内容：

.md-sidenav-backdrop.md-sidenav-shown[_ngcontent-xyh-65] {
    background-color: rgba(0, 0, 0, .6)
}

Angular严格限制范围。麻烦的是背景<div class="md-sidenav-backdrop"></div>是由材质组件添加的（在浏览器渲染时，我猜是这样）。因此，选择器后缀[_ngcontent-xyh-65]在编译时不会添加到该元素。

我能找到的唯一方法是将CSS移到<root>/src/styles.css。 更新：正如Rose所说，将组件名称选择器作为styles.css中添加的CSS的前缀是最安全的。在你的情况下：

md-sidenav-container > .md-sidenav-backdrop.md-sidenav-shown {
    background-color: rgba(0, 0, 0, .6)
}

角度材料2：Sidenav没有背景

2 个答案: