Javascript Angular 7 CSS在使用可重用组件时不工作

我是Angular的新手，来自React.js背景

我制作了一个简单的网格组件，如下所示：

grid.component.js

从'@angular/core'导入{Component，OnInit，Input}；
@组成部分({
选择器：“应用程序网格”，
模板：`
`,
风格：[`
div{
显示器：flex；
}
`]
})
导出类GridComponent实现OnInit{
@输入（）方向：字符串；
@Input（）：字符串；
@Input（）对齐：字符串；
@Input（）宽度：字符串；
@Input（）passClass:string；
构造函数（）{}
恩戈尼尼特（）{
}
样式（）{
返回{
“弯曲方向”：this.direction | |“row”，
“调整内容”：this.justify | |“灵活开始”，
“对齐项目”：this.align | |“灵活开始”，
…（this.width&&{width:this.width}）
};
}
}

不可能在模板中将CSS类作为变量传递。因此，如果您对

aboutus.component.html

的期望是能够将

left

CSS类作为模板中的变量传递，那么这将不起作用

我可以指出一些事情，希望能有所帮助：

如果您想从组件外部修改组件内部的CSS类，一个选项是使用

在您的特殊情况下，我认为没有必要使用

ng deep

。我建议在

app grid

组件中删除

div

元素，而是使用

@HostBinding

decorator将样式应用于主机元素。使用这种方法，您可以完全删除

passCss

，因为现在无论您在哪里使用

app-grid

组件，都可以使用

app-grid

选择器在CSS中设置该组件的样式

grid.component.ts：

import { Component, OnInit, Input, HostBinding, SafeStyle } from '@angular/core';

@Component({
  selector: 'app-grid',
  template: `<ng-content></ng-content>`,
  styles: [`
    :host {
      display: flex;
    }
  `]
})
export class GridComponent implements OnInit {
  @Input() direction: string;
  @Input() justify: string;
  @Input() align: string;
  @Input() width: string;

  constructor(private sanitizer:DomSanitizer) { }

  ngOnInit() {
  }

  @HostBinding('style')
  styles(): SafeStyle {
    const styles = `
      flex-direction: ${this.direction || 'row'};
      justify-content: ${this.justify || 'flex-start'};
      align-items: ${this.align || 'flex-start'};
   `;
    return this.sanitizer.bypassSecurityTrustStyle(styles);
  }
}

你可能还想调查一下。视图封装不会屏蔽自定义CSS属性。这使您能够为组件创建CSS API（如果愿意），并且这些属性可以在组件中的任何位置使用

aboutus.component.sass

app-grid {
  --image: url(../../assets/images/footer.svg)
}

div {
  content: var(--image);
}

grid.component.sass

app-grid {
  --image: url(../../assets/images/footer.svg)
}

div {
  content: var(--image);
}

---

如果要在其他组件中设置某些元素的样式，请使用

：host

和

/deep/

修饰符（已弃用-）。有关此功能的更多信息，请参阅

在您的情况下，这应该有效：

：主机/深度/{
.左{
宽度：50%
&：之后{
底部：0
右：0
z索引：0
右边保证金：-5vw
位置：绝对位置
内容：url（../../assets/images/footer.svg）
}
}
}

您还可以禁用此组件的封装：

@Component({
  selector: 'app-grid',
  template: `
    <div [ngStyle]="styles()" [ngClass]="passClass">
      <ng-content></ng-content>
    </div>
  `,
  styles: [`
    div {
      display: flex;
    }
  `],
  encapsulation: ViewEncapsulation.None
})

@组件({
选择器：“应用程序网格”，
模板：`
`,
风格：[`
div{
显示器：flex；
}
`],
封装：视图封装。无
})

谢谢，在aboutus组件css中，angular 7中不是/deep/不推荐使用吗？你说得对。不幸的是，我不知道还有什么其他选择——关于AngularI中这种不推荐的更多信息，我对使用

ViewEncapsulation持怀疑态度。无
我不确定它是否会影响其他事情。例如，如果我在另一个组件中有
div
选择器，我想它会受到影响，对吗？您的解决方案似乎是完美的。但是，您提到的代码有一些问题<代码>@HostBinding（'style'）styles（）
不起作用，我尝试绑定到
@HostBinding（'attr.style'）
，但据说不安全。我必须做一个单一的样式绑定，比如
@HostBinding（'style.flex-direction'）
。请你更新一下，我会把你的答案标记为正确的。谢谢您的回答。哦，对了，您必须使用中所示的。我会修改我的答案。太棒了！再次感谢你的帮助。