Question

我想创建一个动态组件，使用@Input更改其背景颜色。但是在输入值中使用'＃'给我一个模板解析错误。我该如何逃脱？

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

@Component({
  selector: 'layout-panel',
  template: `
  <div [ngStyle]="{'background-color': bgColor ? bgColor: 'white'}">
  </div>`,
  styles: ['']
})
export class PanelComponent implements OnInit {

  constructor() { }

  @Input() bgColor: string;

  ngOnInit() {
    console.log(this.bgColor);
}

HMTL

<layout-panel [bgColor]="#000"></layout-panel>

Answer 1

您需要将输入#000用单引号引起来，例如：'#000'。

如果要由用户定义bgColor-输入，请在组件中使用变量。

Working stackblitz of your example

Answer 2

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

@Component({
  selector: 'layout-panel',
  template: `
  <div [ngStyle]="{'background-color': bgColor ? `#${bgColor}`: 'white'}">
  </div>`,
  styles: ['']
})
export class PanelComponent implements OnInit {

  constructor() { }

  @Input() bgColor: string;

  ngOnInit() {
    console.log(this.bgColor);
}

HTML

<layout-panel [bgColor]="'#000'"></layout-panel> 强文本

Answer 3

使用另一种格式传输颜色。例如：rgb（0，78，89）或rgba（90，89，23，0.4）。

OR

对于您的组件，我将在组件模板中保留“＃”，而在输入中只能是“ 764598”。

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

@Component({
  selector: 'layout-panel',
  template: `
  <div [ngStyle]="{'background-color': bgColor ? `#${bgColor}`: 'white'}">
  </div>`,
  styles: ['']
})
export class PanelComponent implements OnInit {

  constructor() { }

  @Input() bgColor: string;

  ngOnInit() {
    console.log(this.bgColor);
}

HMTL

<layout-panel [bgColor]="000"></layout-panel>

角@Input组件特殊字符

3 个答案: