Angular 组件标签绑定方法

Question

我正在尝试在父组件的 html 中设置组件的宽度和高度以及其初始声明。具有以下组件标记（在父级的 html 中）：

<app-ipe-artboard [artboard]="artboard" [ngStyle]="setStyle()"></app-ipe-artboard>

其中setStyle() 是画板组件（本身）上的一个方法：

@Component({
    selector: 'app-ipe-artboard'
})
export class ArtboardComponent implements OnInit {
    @Input() public artboard: Artboard;

    ngOnInit() {
    }

    setStyle(): object {
        return {
            width: this.artboard.width + 'px',
            height: this.artboard.height + 'px'
        };
    }
}

是否可以使用此方法（不是我现在所说的方式，因为它会连续给出编译时错误和不希望的运行时行为）？或者当它在这个地方渲染时组件还没有被实例化，这需要以某种不同的方式完成吗？

Answer 1

问题是现在父组件正在寻找它自己的setStyle 方法，但没有找到任何方法，所以它会引发运行时错误。 app-ipe-artboard 上的方法仅限于该组件，父组件无法访问（除非您将该组件的引用传递给您的父组件，这对清理它没有多大作用）。

解决方案 1

假设您要查找的行为是根据artboard 上的变量设置子组件的宽度和高度，您可以使用@HostBinding 完成此操作。

@Component({
  selector: 'app-ipe-artboard'
})
export class ArtboardComponent implements OnInit {
    @Input() public artboard: Artboard;
    @HostBinding('style.width') artboardWidth;
    @HostBinding('style.height') artboardHeight;

    ngOnInit() {
      this.artboardWidth = artboard.width;
      this.artboardHeight = artboard.height;
    }
}

解决方案 2

由于您在父组件中有artboard，因此您可以这样做的另一种方法是将setStyle 方法移动到父组件。

父组件

@Component({
  template: `<app-ipe-artboard [artboard]="artboard" [ngStyle]="setStyle()"></app-ipe-artboard>`
})
export class ParentComponent {
  artboard: Artboard = {width: 500, height: 300};

  setStyle() {
    return { width: this.artboard.width + 'px', height: this.artboard.height + 'px' }
  }
}

解决方案 3
来自 Gunter 的回答 here。

您需要传递与添加到类似样式的元素相同的值并清理样式。

Gunter提供的示例代码：

@HostBinding('style')
get myStyle(): String {
  return this.sanitizer.bypassSecurityTrustStyle('background: red; display: block;');
}

constructor(private sanitizer:DomSanitizer) {}