如何在使用角2的子頁面中使用父styleUrl？

有沒有辦法使用父連接CSS文件使用子頁如何在使用角2的子頁面中使用父styleUrl？

在我的頁面佈局，我有：

@Component({ 
    styleUrls: [ 
     "../assets/css/bootstrap.min.css", 
     "../assets/css/font-awesome.min.css", 
     "../assets/css/theme.min.css"], 
    templateUrl: "_layout.html" 
})

在_layout.html

<router-outlet> 
</router-outlet>

後調用子網址，子頁面正在呈現，但父級CSS不適用。在Chrome瀏覽器開發模式檢查後，我發現，父頁面

ul[_ngcontent-yny-1], li[_ngcontent-yny-1], span[_ngcontent-yny-1], div[_ngcontent-yny-1], button[_ngcontent-yny-1], input[_ngcontent-yny-1], select[_ngcontent-yny-1], span[_ngcontent-yny-1], label[_ngcontent-yny-1]

兒童頁

ul[_ngcontent-yny-2]

在連接

路由配置的應用程序和layoutpage截圖突出低於

export const appRoutes: Routes = [ 
    { 
     path: "", component: PageLayoutComponent 
    }, 
    { 
     path: "", component: PageLayoutComponent, children: PageRoutes 
    } 
] 

export const PageRoutes: Routes = [ 
    { 
     path: "", component: LandingComponent 
    }, 
    { 
     path: "landing", component: LandingComponent 
    } 
]

來源

2017-08-05 Nik Varma

如果你想使用這些風格爲您的整個應用程序，你應該考慮將它們插入到在角CLI樣式陣列。 json文件而不是組件stylesUrl，另一個選項是將封裝設置爲ViewEncapsulation.None。 –

檢查這個帖子，也許這可以幫助你：https://stackoverflow.com/a/36528769/1791913 – Faisal

謝謝@愛默生，但我有三個差異佈局和每個佈局我有差異StyleUrls。也試過ViewEncapsulation.None相同的子TS文件，但它不工作 –

所以，你要能夠使用全局CSS樣式。在這種情況下，刪除斜視封裝，加上下一行中所涉及的部件：

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

來源

2017-08-06 21:52:21 sancelot

如何在使用角2的子頁面中使用父styleUrl？

回答

相關問題