Angular2如何通过ng-content覆盖属性

Question

我有一些看起来像的代码

  <ng-container>
    <ng-content select="[content-body]"></ng-content>
  </ng-container>

我需要在ng-content的顶层div上覆盖一个属性。 例如，如果我需要通过容器Component添加html元素属性tabindex = "-1" 。

<div content-body>
  Hello World
</div>

需要成为

<html>
  <div tabindex="-1">
    Hello World
  </div>
</html>

我不想更新代码库中的每个<div content-body> 。 有什么想法吗？

Answer 1

我可以考虑两种方法来为投影内容分配属性。

方法1 ：（首选IMO）使用指令进行内容选择，并将业务逻辑放入该指令中，以将属性值分配给主机。 例如：

import { Directive, HostBinding } from '@angular/core';

@Directive({
  selector: '[appProductItemsContentBody]'
})
export class ProductItemsContentBodyDirective {

  @HostBinding('style.width') width = '200px';
  @HostBinding('style.height') height = '200px';
  @HostBinding('style.background-color') bgColor = 'yellow';
}

并使用此伪指令按以下方式投影您的内容：

  <ng-container>
    <ng-content select="[appProductItemsContentBody]"></ng-content>
  </ng-container>

将您的内容放在组件中，如下所示：

<app-product-items>
  <div appProductItemsContentBody>
    Hello World
  </div>

  <div appProductItemsContentBody *ngIf="showItem2">
    Item 2
  </div>
</app-product-items>

如果您有更多的复杂性，并且需要基于主机组件中的某些业务逻辑分配属性，则可以使用依赖项注入来注入新服务，该依赖项注入将提供指令和主机组件之间的通信。

方法2：声明指令，并使用“ @ContentChildren”或“ @ContentChild”查找投影内容并直接分配属性。

您可以找到多个内容主体项，如下所示：@ContentChildren（ProductItemsContentBodyDirective，{阅读：ElementRef}）contentBodyItems：QueryList;

然后，使用'setStyle'和ElementRef上的其他方法分配属性。

希望这可以帮助。

请参阅以下示例： https : //stackblitz.com/edit/angular-ngcontent-attribute-assign

Angular2如何通过ng-content覆盖属性

问题描述

1 个解决方案

解决方案1
0 2019-09-03 17:32:49

Angular2如何通过ng-content覆盖属性

问题描述

1 个解决方案

解决方案1 0 2019-09-03 17:32:49

解决方案1
0 2019-09-03 17:32:49