使用组件选择器上设置的值设置CSS值（Angular 5）

Question

这是我想要的，下面。基本上，我想在angular / material中使用mat-icon来访问材质图标，并使用ngStyle指令动态调整它们的大小（如果可用，还可以使用更好的解决方案）。我需要动态调整大小（我认为）因为我需要做的是在mat-icon周围设置一个圆形2px边框，并且该边框的大小取决于mat-icon的font-size属性的大小（例如36px图标需要72px边框和38px边框半径。我还在学习Angular / Material以及它是如何工作的，而我不想做的是硬编码解决方案。相反，如果我可以在组件选择器中放置一个值，那么将该值用作可以分配给CSS属性的变量（例如通过ngStyle），就可以解决问题。

注意：下面的代码是1/2工作，但在控制台（日志）我得到undefined和undefinedpx的值。

编辑：当前代码

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

@Component({
  selector: 'app-circle-icon-container',
  templateUrl: './circle-icon-container.component.html',
  styleUrls: ['./circle-icon-container.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class CircleIconContainerComponent implements OnInit {

  @Input() inputSize: string;
  private fontSize = this.inputSize + 'px';

  constructor() {
    console.log(this.inputSize);
    console.log(this.fontSize);

   }

  ngOnInit() { }

}

//component.html

<div class="flex center align-center circle-icon-container" [ngStyle]="{ 'font-size': fontSize, 'background-color': background_color }">
  <mat-icon>business</mat-icon>
</div>

//parent component.html
<div class="icon-container flex is-column align-center">
  <app-circle-icon-container inputSize="300"></app-circle-icon-container>
</div>

Answer 1

使用：

@Input('icon-size') size: number

Answer 2

好的，它现在正在使用，使用以下内容：

//component.ts
import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';

@Component({
  selector: 'app-circle-icon-container',
  templateUrl: './circle-icon-container.component.html',
  styleUrls: ['./circle-icon-container.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class CircleIconContainerComponent implements OnInit {

  @Input() inputsize: string;
  @Input() backgroundcolor: string;
  public fontSize: string;
  public backgroundColor: string;

  constructor() {

   }

  ngOnInit() {
    console.log(this.inputsize);
    this.fontSize = this.inputsize + "px";
    const sizeContainer = (input) => {
      let container = parseInt(input);
      container = container * 2;
      console.log(container);
      return container;
    }
    const sizeContainerRadius = (input) => {
      let container = parseInt(input);
      container = container*2;
      container += 2;
      console.log(container);
      return container;
    }
    this.containerSize = sizeContainer(this.inputsize) + "px";
    this.backgroundColor = this.backgroundcolor;
    this.radiusSize = sizeContainerRadius(this.inputsize) + "px";
   }

}

//component.html
<div class="flex center align-center circle-icon-container" [ngStyle]="{ 'width': containerSize, 'height': containerSize, 'border-radius': radiusSize }">
  <mat-icon [ngStyle]="{ 'font-size': fontSize, 'background-color': backgroundColor }">business</mat-icon>
</div>

//parent component.html
<app-circle-icon-container inputsize="300" backgroundcolor="#405e7c"></app-circle-icon-container>

Answer 3

您应该使用方括号将变量从父组件传递到子组件：

//parent component.html
<app-circle-icon-container [inputsize]="300" [backgroundcolor]="#405e7c"></app-circle-icon-container>

您可以在子组件中使用不同的名称，这就是我使用的原因

@Input('inputsize') youCanNameItAsYouWant: number;
// Where 'inputsize' is the reference, this should be the same what you use in the square brackets [inputsize]
// and you can use 'youCanNameItAsYouWant' variable in your child component wherever you want...

在这里，您可以查看一个工作示例：https://embed.plnkr.co/RbMKgf8GtLUEPhwLVwWh/