使用组件选择器上的值设置 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

好的，现在可以使用了：

//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 2

用途：

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

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/