角度材料2:Sidenav没有背景。

I am currently developing an Angular 2 site and having some trouble with the SideNav component.

我目前正在开发一个角2的站点，并且在SideNav组件上有一些麻烦。

The SideNav can have 3 modes, none of which seem to change what happens when I open the Sidenav. I am trying to get the backdrop to display after opening.

SideNav可以有三种模式，但没有一种模式可以改变当我打开SideNav时发生的事情。我正在试着让背景在打开后显示出来。

The sideNav does open, however the backdrop doesn' t show up.

sideNav是开放的，但是背景没有出现。

The root of the app is the md-sidenav container. The SideBar component will also be passed to the NavBar component as the open button is defined in there.

应用程序的根是md-sidenav容器。侧边栏组件也将传递给NavBar组件，因为其中定义了open按钮。

Note that I have also tried to bring the SideBar component outside the <md-sidenav-container>

注意，我还尝试将侧栏组件放在之外。

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

The SidNnav currently contains 2 links and is set to mode "over" (which should create a SideNav and backdrop over the main content)

SidNnav目前包含两个链接，并设置为模式“over”(在主要内容上创建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>

Inspecting the page using chrome's developer tools reveals that a backdrop is created (<div class="md-sidenav-backdrop"></div>) and covering the whole page, however it is set to hidden and has no effect due to not having a functional CSS applied to it. (only set fixed width, height and position, nothing visible that alters the page)

使用chrome开发工具查看页面会发现创建了一个背景(

)，并覆盖整个页面，但是它被设置为隐藏，并且由于没有应用功能CSS而没有效果。(只设置固定的宽度、高度和位置，不可见改变页面)

The prebuild-css has a background color tag for it, however it needs a .md-sidenav-shown:

预构建的css有一个背景颜色标记，但是它需要一个.md-sidenav- display:

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

Is there anything that would cause this behavior to happen? None of the tutorials and examples I found did something complicated so I think it is due to my set-up.

有什么会导致这种行为发生吗?我发现的任何教程和示例都没有做什么复杂的事情，所以我认为这是由于我的设置。

Relevant Libraries and versions (All webjars):

2 个解决方案

#1

It seems that you cannot put md-sidenav inside component because there is no link between md-sidenav-container and child md-sidenav's. Md-sidenav-container uses @ContentChildren to access md-sidenav instances.

似乎不能将md-sidenav放在组件中，因为在md-sidenav-container和child md-sidenav之间没有联系。md-sidenav -container使用@ContentChildren访问md-sidenav实例。

So there must be direct parent-child relation between md-sidenav-container and md-sidenav.

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

#2

To keep the scope of CSS defined in your.component.css limited to only that component, Angular processes the CSS/SCSS/SASS files and adds "attribute" selectors to each CSS rule defined in that file.

为了使.component. CSS中定义的CSS范围仅限于该组件，角化处理CSS/SCSS/SASS文件，并向该文件中定义的每个CSS规则添加“属性”选择器。

In your case, it converts your .md-sidenav-backdrop.md-sidenav-shown {...} CSS rule into something like:

在您的例子中，它转换.md-sidenav- background。md-sidenav-shown {…CSS规则如下:

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

Angular is strict about restricting the scope. The trouble is that the backdrop <div class="md-sidenav-backdrop"></div> is added by the material component (at browser render time, I presume). Hence, the selector suffix [_ngcontent-xyh-65] is not added to that element at compile time.

角的限制是严格的。麻烦的是，背景

是由材料组件添加的(我认为是在浏览器渲染时)。因此，在编译时不会向该元素添加选择器后缀[_ngcontent-xyh-65]。

The only way around it, that I could find till now, is to move your CSS to <root>/src/styles.css. UPDATE: As Rose suggests, it would be safest to have your component name selector prefixed to the CSS you add in styles.css. In your case:

到目前为止，我所能找到的惟一方法是将CSS转移到 /src/styles.css。更新:正如Rose所建议的，将组件名称选择器放在样式表中添加的CSS中是最安全的。在你的例子:

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

#1