使用 [ngTemplateOutlet] 对 ng-container 内的元素应用类

Question

我有一个PARENT组件，它有一个CHILD组件。 此父组件包含将绑定到 CHILD 组件中的ng-template。

为了styleng-container的元素(svg(，我使用了ng-deep并且它起作用了。

我现在想要的是动态地将class从 CHILD 组件(如ngClass(添加到ng-container的元素(svg(;

请参阅下面的代码以获得更好的理解。

父母

.HTML：

...
<app-input [icon]="userIcon"></app-input>
...
<!-- TEMPLATES -->
<ng-template #userIcon>
<svg>...</svg>
</ng-template>

---

孩子

.HTML：

<ng-container *ngIf="$icon" [ngTemplateOutlet]="$icon"></ng-container>
...

打字稿：

export class InputComponent implements ControlValueAccessor {
...
@Input('icon') public $icon: TemplateRef<any>;
private color: boolean = false; // --> When this is true, apply a new class
public onFocus(): void {
this.color = true;
}
...

SCSS：

::ng-deep {
svg {
transition: .3s fill;
fill: map-get($colors, placeholder);
}
}

Answer 1

使用 ng-container，您可以传递上下文，例如

<ng-container [ngTemplateOutlet]="user;context: {color: className}></ng-container>

然后你可以像在模板中一样使用它

<ng-template let-color="color">
<div [class]="color"></div>
</ng-template>