Question

我有一个组件，它所做的只是渲染，它是这样的：

@Component({
     selector: 'my-comp',
     host: ???,
     template: `
         <ng-content></ng-content>
     `
})

 export default class MyComp {
   @Input() title: string;
   public isChanged: boolean;
 }

组件具有isChanged属性，我想基于isChanged属性在主机元素上应用样式。这甚至可能吗？

Answer 1

您可以使用style和@Component({ selector: 'my-comp', host: { '[class.className]': 'isChanged' }, template: ` <ng-content></ng-content> ` }) export default class MyComp { @Input() title: string; public isChanged: boolean; }前缀。这是一个示例：

{{1}}

有关详细信息，请参阅Günter的答案：

ngClass in host property of component decorator does not work

Answer 2

使用@HostBinder的解决方案

公认的解决方案是使用host元数据属性，该属性违反了TSLint的规则：

TSLint：使用@HostBinding或@HostListener而不是host 元数据属性（https://angular.io/styleguide#style-06-03）

使用@HostBinding可以实现相同的目的：

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

@Component({
  selector: 'my-comp',
  template: `
    <ng-content></ng-content>
  `
})
export default class MyComp {
  @Input() title: string;
  public isChanged: boolean;
  @HostBinding('class.className') get className() { return this.isChanged; }
}

Answer 3

不确定您要做的是什么，但是这样的事情应该足够您使用ngAfterViewInit和ElementRef：

import {AfterViewInit, ElementRef} from '@angular/core';

@Component({
   selector: 'my-comp',
   host: ???,
   template: `
     <ng-content></ng-content>
   `
})

 export default class MyComp implements AfterViewInit {
   @Input() title: string;
   public isChanged: boolean;

   constructor(private _ref: ElementRef) {}

   ngAfterViewInit() {

     var host = this._ref.nativeElement;

     if (this.isChanged) {
        host.style.width = '200px';
     }
   }
 }

如果您想在每次更改isChanged时进行一些检查，那么您也可以实施ngDoCheck：

ngDoCheck() {

  if (this.isChanged !== this.previousIsChanged) {

    var host = this._ref.nativeElement;

    if (this.isChanged) {
      host.style.width = '200px';
    }
  }
}

Answer 4

我想你想让你的组件触发一个可以被主机捕获的事件（并且可能用它传递一些数据）。

要做到这一点，你会有一个@output属性，如：

@Output() isChanged: EventEmitter<any> = new EventEmitter()

然后在你的代码中你可以做到：

this.isChanged.emit(some value to pass)

并抓住它：

(isChanged)="doSomething($event)"

主机元素上的条件样式

4 个答案:

使用@HostBinder的解决方案