Question

我正在为现有的第三方组件创建包装器组件。目标是通过一些自定义样式和逻辑来增强第三方的功能。

使用不同的指令配置第三方组件。我的第一个想法是有条件地应用这些指令，这在Angular目前是不可能的。

所以我想出了在我的模板中加倍相同的标记（这很糟糕）并根据*ngIf条件有条件地显示它。第三方组件还提供content projection，我也想在我的包装器组件中利用它。但是，似乎只有投影内容才会显示在模板中的最后/最低<ng-content></ng-content>内。如何在每个<ng-content>中强制执行投影内容？

相关代码：

file：my-button.component.ts

@Component({
  selector: 'my-button',
  templateUrl: 'my-button.component.html',
  styleUrls: [ 'my-button.component.scss' ],
  encapsulation: ViewEncapsulation.None // since I want to overwrite some of the 3rd party component's style
})    
export class MyButtonComponent {    
  @Input()
  public isCircle: boolean = false;
}

file：my-button.component.html

<button *ngIf="!isCircle" mat-button>
  <ng-content></ng-content>      
</button>

<button *ngIf="isCircle" mat-fab>
  <ng-content></ng-content>
</button>

用法/父组件的模板：

<!-- This renders '<button mat-button></button>', and hence is never displayed -->
<my-button>
  rectangle-shaped button
</my-button>

<!-- This will be displayed correctly, because it's the most recent projected content -->
<my-button [isCircle]="true">
  circular button
</my-button>

使用<ng-content>进行相同内容的多个投影

0 个答案: