如果@Input在angular中為true，如何應用類

Question

我有一個輸入變量：

@Input()
public isNotReplay: boolean | false;

如果此變量為true，則我想應用具有樣式的類：

.main-chat {
    overflow: auto;
}

我已經將其與三級運算符一起使用，如下所示：

<div class="message-container" [ngClass]="isNotReplay ? 'main-chat' : 'some-other-class'">

但是，我只想應用主聊天類，如果它是真實的，而不必使用其他類。 有更好的方法嗎？

Answer 1

您有幾種選擇，但是我認為您正在尋找的是以下內容： <div class="message-container" [ngClass]="{ 'main-chat':isNotReplay }">

ngClass可以接受一個對象。 對象屬性是根據屬性的值有條件地賦予HTML元素的類。

無論其價值如何，您都需要編寫代碼： @Input() public isNotReplay: boolean | false; @Input() public isNotReplay: boolean | false; 看起來應該應該是@Input() public isNotReplay: boolean = false;

Answer 2

<div [class.class-name]="isNotReplay"></div>