Angular 5 - Change Style of Host Class in TS File

问题

I am trying to use ngx-image-cropper and I have found the class of source-image that could be used to perform zoom in of image.

In inspect element, the class look like this:

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

I am trying to change the max-width and max-height from TS file. And I also try to write in CSS File:

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

But, nothing changed. Any idea?

回答1:

Read up about component styles. The _nghost-c7 are classess generated by angular when component encapsulation is set to enum ViewEncapsulation.Emulated. You should not target them in your application code. See what the docs say about it:

They are automatically generated and you never refer to them in application code. But they are targeted by the generated component styles, which are in the section of the DOM [...] These styles are post-processed so that each selector is augmented with _nghost or _ngcontent attribute selectors.

回答2:

Change Style of Host Class in TS File

Use @HostBinding decorator to bind any property of ts code to host.

@HostBinding - will bind property to host element, If a binding changes, HostBinding will update the host element.

export class App {
    name:string;

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

    constructor() {}

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

来源：https://stackoverflow.com/questions/49550113/angular-5-change-style-of-host-class-in-ts-file

标签

angular

angular5