有什么方法只能渲染我的Angular組件的模板/內容嗎？

Question

我想要一個干凈的HTML，只有組件內容而不是容器，因為我想使用ITCSS和RSCSS方法。

因此，以為我有兩個組成部分： app-simple-card和app-superior-header ； 我要具有以下結構。

簡單card.component.scss

.simple-card {
    > .header {
        @extends .superior-header;
        @extends .superior-header.-compact;
    }
}

優越-header.component.scss

.superior-header {
    > .title {}

    &.-compact {}
}

問題

Angular渲染了組件內容的“容器”，迫使我將組件名稱用作選擇器的一部分。 它與RSCSS方法背道而馳，所以我不想那樣做，並且在另一個項目中重用樣式將很糟糕。

現在，scss文件將如下所示：

.simple-card {
    > app-superior-header > .header {...}
}

我也不想將組件用作屬性 ，因為它不能解決我的問題， 也不認為是一種好習慣 。 我需要完全刪除/替換僅顯示其內容的組件“容器”。

Answer 1

在組件樣式中，您可以使用

:host {}

如果要針對組件使用中的子對象

&/deep/ {}

Answer 2

我聽到您在說什么，但是請為組件使用屬性選擇器和主機綁定，以將類添加到所使用的任何元素。

Angular Style Guide不是您必須遵守的法律手冊，它僅包含准則。 如果您的用例需要其他實踐，請使用它

@Component({
  selector: '[appSimpleCard]',
})
export class SimpleCard {
  @HostBinding('class')
  classList = 'simple-card'; // or rather 'c-simple-card'
}

對組件使用屬性選擇器就像常規指令一樣，您可以控制所有屬性，包括添加ITCSS組件類和帶有主機綁定和主機偵聽器的host元素的事件，以及呈現模板。 這正是我們想要的。

另一個好處是，您不必像所有自定義元素標簽一樣，在組件樣式中添加:host { display: block } 。 您還可以為以這種方式呈現的每個組件在DOM中保存一個額外的元素，這可以在一個復雜的應用程序中添加多達幾個保存的元素。

這不適用於本機視圖封裝（陰影DOM）。