使用 [ngTemplateOutlet] 在 ng-container 內的元素上應用 class

Question

我有一個 PARENT 組件，它有一個 CHILD 組件。 這個 PARENT 組件包含將綁定到 CHILD 組件中的ng-template 。

為了設置ng-container元素（ svg ）的style ，我使用了ng-deep並且它起作用了。

我現在想要的是從 CHILD 組件（如ngClass ）動態地將class添加到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>

...

TYPESCRIPT：

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>