Question

是否可以从外部为组件指定标记/样式？例如，在以下组件中，我如何使{{name}}斜体或粗体？我想让用户选择他们喜欢哪种风格。

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

@Component({
  selector: 'rio-child',
  template: `
        Name is {{this.name}} <!-- user should specify whether name should be displayed in italic or bold -->
  `
})
export class ChildComponent {
  @Input() name:string;
}

Answer 1

您可以向组件添加输入属性，将文本放在span元素中，并使用属性绑定对其进行样式设置：

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

@Component({
  selector: 'rio-child',
  template: `
    Name is <span [style.font-weight]="isBoldName" [style.font-style]="isItalicName">{{name}}</span>
  `
})
export class ChildComponent {
  @Input() name:string;
  @Input() isBold: boolean;
  @Input() isItalic: boolean;

  public get isBoldName(): string {
    return this.isBold ? "bold" : "normal";
  }

  public get isItalicName(): string {
    return this.isItalic ? "italic" : "normal";
  }    
}

该属性将以这种方式设置为标记：

<rio-child [name]="My name" [isBold]="true" [isItalic]="false"></rio-child>

如果需要更通用的选项，可以提供一个输入属性来在一个对象中设置样式属性，并将span元素的[ngStyle]属性绑定到该属性：

`Name is <span [ngStyle]="style">{{name}}</span>`

@Input() style: any;

<rio-child [name]="My name" [style]="{'font-weight': 'bold', 'color': 'green'}"></rio-child>

Answer 2

在这种情况下，您的用户可以使用此css

rio-child {
    font-weight: bold;
}

但是在更复杂的情况下，如果您希望用户能够自定义组件css（不使用::ng-deep），则必须指定您的组件不使用css封装

@Component({
    selector: 'rio-child',
    template: '<...>',
    encapsulation: ViewEncapsulation.None
})

（see doc here）

是否可以从外部指定组件的样式？

2 个答案: