將類傳遞給子組件主機

Question

我已經習慣了React方法，我基本上可以在任何地方注入任何東西。

我在Angular中有一個啞巴Button或app-button組件。 它是內聯塊（ :host類），因此其寬度取決於內容。 在這種情況下，我不能覆蓋它的參數，如display: block或set width。 我可以通過添加新的@Input每個參數（ [display] ， [width] ）來手動完成它，但它並不是很好。

我想要的行為是此組件上的輸入/指令，以向子組件內部提供顯式注入類。

在React中，我只需添加類名稱的prop，並指定它或傳遞一些內聯樣式，具體取決於我正在使用的樣式系統。

是否有任何方式/ lib / util來處理這個問題？

Answer 1

由於Angular的ViewEncapsulation你不能像React那樣做。

你最好的選擇是直接設置按鈕:host元素。 這樣，您可以使用父組件中定義的類覆蓋它。

APP-button.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-button',
  template: `
    I am red by default
  `,
  styles: [`
  :host {
    background-color: red;
  }
  `]
})
export class ButtonComponent {}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <app-button class="button"></app-button>
  `,
  styles: [
    `.button { 
       background-color: blue; 
     }
    `
  ]
})
export class AppComponent  {}

現場演示

Answer 2

您不應該為父組件中的子組件元素編寫CSS規則，因為Angular組件是一個自包含的實體，應該明確聲明可用於外部世界的內容。 如果子布局將來發生變化，那么分散在其他組件的SCSS文件中的子組件元素的樣式很容易破壞，從而使您的樣式非常脆弱。 這就是CSS的情況下ViewEncapsulation的用途。 否則，如果您可以從面向對象編程中的任何其他類為某些類的私有字段賦值，那么它將是相同的。

因此，您應該做的是定義一組可以應用於子宿主元素的類，並實現子代對它們的響應方式。

從技術上講，它可以如下完成：

// child.component.html:
<span class="label-1"></span>

// child.component.scss:
:host.child-color-black {
    .label-1 {
        color: black;
    }
}

:host.child-color-blue {
    .label-1 {
        color: blue ;
    }
}

// parent.component.html:
<child class="child-color-black"></child>
<child class="child-color-blue"></child>

換句話說，您使用Angular + CSS類集提供的:host偽選擇器來定義子組件本身中可能的子樣式。 然后，您可以通過將預定義的類應用於<child> host元素來從外部觸發這些樣式。

Answer 3

今天還有其他幾種可能性：

：host-context（.some-class-name）這使您可以對某些外部類做出反應

:: ng-deep css-expression {xx}通過這種方式，您可以在父級中定義一個可在其子級中使用的類。

---

例：

parent.component.html

<app-button class="theme-blue"> my button </app-button>

button.component.css

:host-context(.theme-blue) button {
   background-color: blue;
}

有人可以查看這個非常好的指南： https ： //alligator.io/angular/styles-between-components-angular/