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 的回答 .

You need to pass the same value you would add to an element like and sanitize the styles.

示例代码由Gunter提供：

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

constructor(private sanitizer:DomSanitizer) {}

Angular组件标签绑定方式

Angular component tag bind method

angular2-template

angular2-databinding

angular