Question

问题：我想要一个宽度为100％的单个组件（spacer），并且可以在HTML中出现的任何位置输入高度（本测试中的home.html）：

  number 1
  <spacer height="'200px'"></spacer>
  no more

spacer.html：

<div class="container-fluid spaceContainer" [ngStyle]="{'height': 'height'}">
  spacer is here  <<<--- this text is just for testing
</div>

scss：

.spaceContainer {
  width: 100%;
  border: 1px solid red;
  display: flex;
  flex-direction: row;
}

Spacer.ts：

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

@Component({
  selector: 'spacer',
  templateUrl: './spacer.component.html',
  styleUrls: ['./spacer.component.scss']
})
export class SpacerComponent implements OnInit {
  @Input() height: string;

  constructor() {
  }

  ngOnInit() {
    console.log('height is '+ this.height);
  }
}

运行时，console.log给出：height为'200px' 但是红色边框的高度足以容纳'spacer is here'文字。

我很难理解绑定，所以我尝试过：

<spacer height="200px"></spacer>

控制台：高度是200px，我认为这可以工作，但没有变化。不理解attr，我尝试了attr.height的变种。

这必须简单，可能有助于消除我对绑定如何运作的误解。提前致谢，瑜珈

Answer 1

你的错误就在这一行：

[ngStyle]="{'height': 'height'}"
                     ^^^^^^^^^^
                 it should be just height

您将高度绑定到字符串'height'，但您应该将其绑定到组件的height属性，例如：

[ngStyle]="{'height': height}">?

或

[style.height]="height"

angular 2+尝试绑定NgStyle中的Input参数

1 个答案: