角材2：Sidenav沒有背景

Question

我目前正在開發一個角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個鏈接，並「在」設置爲模式（應該在創建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>）和COV使整個頁面，但它被設置爲隱藏，並沒有效果，因爲沒有一個功能的CSS應用到它。 （只設置固定的寬度，高度和位置，沒有任何可見的是改變頁）

的預生成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文件並向該文件中定義的每個CSS規則添加「屬性」選擇器。

在你的情況下，你的.md-sidenav-backdrop.md-sidenav-shown {...} CSS規則轉換成類似：

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

角是嚴格有關限制範圍。麻煩的是背景<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) 
}