0

親コンポーネントの 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'
        };
    }
}

このメソッドに到達することは可能ですか (コンパイル時のエラーと望ましくない実行時の動作が連続して発生するため、今述べた方法ではありません)? または、コンポーネントがこの場所でレンダリングされたときにまだインスタンス化されていないので、これを何らかの方法で行う必要がありますか?

4

1 に答える 1

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) {}
于 2018-02-13T17:23:03.700 に答える