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

您可能会以错误的方式进行操作。我将尝试概述一个好的方法。首先，为您的模板创建一个目录：

templates - template.component.css (generic styling) - template.component.html (your markup) - template.component.ts (your 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样式，但是您可以像我一样将自定义类粘贴在该标签中，或者在主要组件的样式页中这样调用它：

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

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

注意：与其称它们为模板，不如考虑称它们为共享组件或共享模态（如果这样）。有一个名为shared > components的目录，并有一个custom-name目录，其中包含用于组织的内容。

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

1 个答案: