html - 对模板组件中的 ng-content 使用样式

Question

我已经创建了一个模板案例组件，我打算将其用于多个案例。为了将该组件用作模板，我使用了 ng-content select="" .

它工作正常，但并不完全符合预期。例如:

• 我有一个带有背景图片的 div，它的样式是在模板组件内部配置的:

<div class="front-image min-vh-100 min-vw-100" [style.transform]="'scale(' + scale + ')'">
</div>

为了使其可用作模板，我将给定的代码替换为:<ng-content select=".front-image"></ng-content>并像这样在另一个组件中使用模板:

<app-case-template *ngIf="cases[3] as case">

  <div class="front-image min-vh-100 min-vw-100" [ngStyle]="{ 'background-image': 'url(' + case.image + ')'}"
       [style.transform]="'scale(' + scale + ')'">
  </div>

</app-case-template>

我怎样才能使模板始终从模板组件中获取其样式 - 现在我必须在新组件中声明其样式才能使其正常工作。另外[style.transform]停止工作。

有没有类似绕过的东西？

Answer 1

您可能以错误的方式解决了这个问题。我会尝试概述一个好的方法来做到这一点。首先，为您的模板创建一个目录:

模板
- template.component.css(通用样式)
- template.component.html(你的标记)
- template.component.ts(你的 ts/js)

设置您的 template.ts 以供使用:

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

@Component({
  selector: 'template-component',
  templateUrl: 'template.component.html'
  styleUrls: ['./template.component.css']
})
export class TemplateComponent {

}

在您的 component.module.ts 中注册它(或者您可能给它起的任何名字):

...
import {TemplateComonent} from './templates/template.component';
...
const exportedComponents = [
   SvgIconComponent
]

如果需要，让您的 shared.module.ts 导出它:

import {ComponentsModule} from './components/components.module';
...
exports: [ComponentsModule]

现在您可以像使用自定义 HTML 标签(您的选择器)一样使用它:

<template-component class="template"> </template-component>

现在它将始终从自身获取 css 样式，但您可以像我所做的那样在该标记中粘贴一个自定义类，或者从您的主要组件的样式页面中这样调用它: p>

template-component {
   margin: 10px;
   background-color: grey;
}

您可以做很多事情，包括在模板中设置可以从 HTML 标记调用的 @Input() 标记。您还可以使用 Angular 绑定(bind)动态地向其中输入值或文本。这里有很多选择。

注意:与其称它们为模板，不如考虑称它们为共享组件或共享模态(如果是的话)。有一个名为 shared > components 的目录，并有一个 custom-name 目录，其中包含用于组织的类似内容。