Question

我正在编写组件来帮助实现Semantic-UI元素。我的'card'元素模板包含几个<ng-content>元素，用于转换卡片的特定部分。由于Semantic-UI的CSS的细节，我希望将类名应用于某些转换的根元素。我尝试使用包含已分配类的包装元素但由于CSS规则的嵌套不正确而导致子元素中的一些错误。

此时的组件模板：

<div class="image" *ngIf="image">
  <img src="{{image}}">
</div>
<div class="content">
  <ng-content select="[card-title]"></ng-content>
  <div class="meta">
    <ng-content select="[card-subtitle]"></ng-content>
  </div>
  <div class="description">
    <ng-content select="[card-content]"></ng-content>
  </div>
</div>
<div class="extra content">
  <ng-content select="[card-extra]"></ng-content>
</div>
<ng-content></ng-content>

理想情况下，我想要更接近这一点，但要明白你不能只为<ng-content>分配类名：

<div class="image" *ngIf="image">
  <img src="{{image}}">
</div>
<div class="content">
  <ng-content select="[card-title]"></ng-content>
  <ng-content select="[card-subtitle]" class="meta"></ng-content>
  <ng-content select="[card-content]" class="description"></ng-content>
</div>
<ng-content select="[card-extra]" class="extra content"></ng-content>
<ng-content></ng-content>

有没有什么方法可以选择替换[card-subtitle]的根元素，以便我可以添加“meta”类？我已经看到了几个答案，但他们假设你只有一个<ng-content>元素。

Answer 1

您可以使用@ContentChild装饰器获取每个内容孩子的引用，然后使用Renderer2之类的内容为每个对应的nativeElement添加一个类。但请注意，您必须将一个组件或指令传递给@ContentChild装饰器，因此只有card-title例如是一个让我们说SemanticUiCardTitleDirective的选择器而且你也是需要对native元素的引用，因此你必须将read属性设置为ElementRef。

所以，在你的组件中：

import { AfterContentInit, Component, ElementRef, Renderer2 } from '@angular/core';
import { SemanticUiCardTitleDirective, //...etc } from 'path/to/directives';

@Component({..})
export class SomeComponent implements AfterContentInit {
  @ContentChild(SemanticUiCardTitleDirective, { read: ElementRef })
  cardTitle: ElementRef;

  constructor(private renderer: Renderer2) {}

  ngAfterContentInit() {
    this.renderer.addClass(this.cardTitle.nativeElement, 'some-class');
  }
}

在具有多个转置的组件中选择转换的根元素

1 个答案: