Question

我正在尝试使用ngx-image-cropper，我找到了可用于执行图像放大的源图像类。

在inspect元素中，类看起来像这样：

[_nghost-c7] > div[_ngcontent-c7] .source-image[_ngcontent-c7] {
    max-width: 100%;
    max-height: 100%;
}

我正在尝试更改TS文件的max-width和max-height。我也尝试用CSS文件编写：

[_nghost-c7] > div[_ngcontent-c7] .source-image[_ngcontent-c7] {
    max-width: 150%;
    max-height: 150%;
}

但是，没有任何改变。有什么想法吗？

Answer 1

了解component styles。当组件封装设置为枚举ViewEncapsulation.Emulated时，_nghost-c7是由角度生成的classess。您不应该在应用程序代码中定位它们。看看文档对它的评价：

它们是自动生成的，您永远不会在应用程序代码中引用它们。但它们是生成的组件样式的目标，它们位于DOM的这一部分[...]中。这些样式经过后处理，以便每个选择器都使用_nghost或_ngcontent属性选择器进行扩充。

Answer 2

更改TS文件中主机类的样式

使用@HostBinding装饰器将ts code的任何属性绑定到主机。

@HostBinding - 将属性绑定到主机元素，如果绑定发生更改，HostBinding将更新主机元素。

export class App {
    name:string;

    @HostBinding('style.width') 
     width = 400;

    constructor() {}

    changeWidth(width) {
      this.width = width;
    }
  }

Angular 5 - 改变TS文件中主机类的风格

2 个答案: