如何从Angular 5中的父级继承子组件中的css样式 [英] How to inherit css styles in child component from parent in Angular 5

问题描述

我有一个父组件，里面有一个子组件.父组件有一些 css 类，子组件在其中扩展它们.我尝试使用 :host 来查看文档，但似乎无法正常工作.

子组件:

<div class="table-cell body-content-outer-wrapper"><div class="body-content-inner-wrapper"><div class="body-content"><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div><div>这是高度未知的可滚动内容</div>

父组件:

 
<div class="table-row header"><button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">简单可折叠</button><div id="demo" class="折叠">Lorem ipsum dolor sat amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat.

<app-child-component></app-child-component>

父组件css:

 :host .table {显示:表；}:host .table-row {显示:表格行；}:host .table-cell {显示:表格单元格；}:host .container {宽度:400px；高度:100vh；}:host .header {背景:青色；}:host .body {背景:黄色；高度:100%；}:host .body-content-outer-wrapper {高度:100%；}.body-content-inner-wrapper {高度:100%；位置:相对；溢出:自动；}.body 内容 {位置:绝对；顶部:0；底部:0；左:0；右:0；}

问题是，即使我将 css 类放在子组件中，布局也会因为存在子组件模板而中断.所以主要问题是子组件从父组件继承extend css的正确方法是什么?

解决方案

为什么要让事情变得复杂?

理想的做法是在子组件中添加父 css 文件的引用.

 @Component({选择器:'子应用'，模板网址:`./child.component.html`，styleUrls:['./parent/parent.component.css', './child.component.css']})导出类 ChildComponent { }

I have a parent component inside which I have a child component. The parent component have some css classes, where child component extends them. I tried to use :host as looking at documentation, but cant't seem to get it work properly.

child component:

<div class="table-row body">
<div class="table-cell body-content-outer-wrapper">
    <div class="body-content-inner-wrapper">
        <div class="body-content">
            <div>This is the scrollable content whose height is unknown</div>
            <div>This is the scrollable content whose height is unknown</div>
            <div>This is the scrollable content whose height is unknown</div>
        </div>
    </div>
</div>

parent component:

         <div class="table container">
                 <div class="table-row header">
                        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
                        <div id="demo" class="collapse">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </div>
                  </div>
            <app-child-component></app-child-component>
                </div>

parent component css:

  :host  .table {
    display: table;
  }

  :host .table-row {
    display: table-row;
  }

  :host .table-cell {
    display: table-cell;
  }

  :host .container {
   width: 400px;
   height: 100vh;
  }

  :host  .header {
    background: cyan;
 }

   :host .body {
    background: yellow;
    height: 100%;
 }

  :host .body-content-outer-wrapper {
    height: 100%;
 }

 .body-content-inner-wrapper {
    height: 100%;
   position: relative;
   overflow: auto;
}

 .body-content {
    position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}

The problem if even I put css classes inside the child component, the layout breaks just because there is a child-component template. So the main question is what is proper way for child to inherit extend css from parent component?

解决方案

Why make things complex?

Ideal way to do would be to add refrence of parent css file in child component as well.

 @Component({
    selector: 'child-app',
    templateUrl: `./child.component.html`,
    styleUrls:['./parent/parent.component.css', './child.component.css']
})
export class ChildComponent { }

这篇关于如何从Angular 5中的父级继承子组件中的css样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！