Angular2 +風格的父項的外部元件範圍

app.component.html

<app-nav></app-nav> 
    <div class="page-wrapper"> 
     <div class="page-content clearfix"> 
     <router-outlet></router-outlet> 
     </div> 
    </div>

可我申請以下的CSS page-wrapper和page-content類時路由器到特定的Component和去其他Component刪除，因爲它是...？

CSS

.page-content { 
    margin-bottom: 0px; 
} 

@media screen and (min-width: 1367px) { 
    .page-wrapper { 
    width: 100%; 
    } 
}

我也嘗試View Encapsulation選項（無），但這個應用樣式頭這始終是他們的......即使我的路線等Component。

@Component({ 
// ... 
encapsulation: ViewEncapsulation.None, 
styles: [ 
    // ... 
] 
})

來源

2017-06-21 Jongz Puangput

你的意思是，當你在'componentX'要一些樣式應用到'頁wrapper'當你在'componentY'要改變風格的'頁面wrapper'等上... ？ –

你可以檢查這個鏈接@ https://toddmotto.com/emulated-native-shadow-dom-angular-2-view-encapsulation我希望這可以幫助。 –

@Mr_Perfect yes只有風格，直到componentX仍然存在 –

你是在正確的軌道上，需要從使用ViewEncapsulation.None顯示在<router-outlet>每個部件的樣式和page-wrapperpage-content。因此，通過編寫這樣的樣式，每次父元素（page-wrapper和page-content）樣式將基於組件被覆蓋。

@Component({ 
    selector: 'component-x', 
    encapsulation: ViewEncapsulation.None, 
    styles: [` 
     .page-wrapper, .page-content{ 
      background-color: red; 
     } 
    `] 
}); 


@Component({ 
    selector: 'component-y', 
    encapsulation: ViewEncapsulation.None, 
    styles: [` 
     .page-wrapper, .page-content{ 
      background-color: green; 
     } 
    `] 
});

來源

2017-06-21 08:57:44

Angular2 +風格的父項的外部元件範圍

回答

相關問題