HostBinding funktioniert nicht wie erwartet beim Anwenden der Klasse

Question

Ich habe einen Artikel über häufige schlechte Praktiken beim Erstellen von Komponenten gelesen. Einer der Punkte, die im Artikel erwähnt wurden, war das Hinzufügen zusätzlicher Tags (wie) zu Ihrer Komponentenvorlage, um alles zu gruppieren, das von der Komponente generiert wurde. Dies ist nicht notwendig, da alles, was von Ihrer Komponente generiert wird, bereits in den Selektor-Tags gruppiert ist. Macht Sinn, also wollte ich das in meinem Code aufräumen.

Also wollte ich mit @HostBinding die Stilklasse auf die Komponente anwenden und das nicht benötigte Tag entfernen, aber es funktioniert nicht und ich bin mir nicht sicher, was ich falsch mache. Hier ist ein grundlegendes Beispiel. Die Klassen, die ich anwenden möchte, stammen vom Bootstrap CSS.

Vorher:

import {Component, HostBinding} from '@angular/core'; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html' 
}) 
export class AppComponent { 
    title = 'app'; 
} 

und der Vorlage

<div class="container"> 
    <div class="col-md-5"> 
    <h1>Welcome to {{title}}!</h1> 
    </div> 
    <div class="col-md-5"> 
    <h2>Here are some links to help you start: </h2> 
    <ul> 
     <li><h2>x</h2></li> 
     <li><h2>y</h2></li> 
     <li><h2>z</h2></li> 
    </ul> 
    </div> 
</div> 

Dies funktioniert wie ich will. Der Behälter ist in der Mitte des Bildschirms zentriert.

Ich entfernte das äußerste Div aus der Vorlage und fügte dann @HostBinding zur Komponente hinzu.

Nach:

import {Component, HostBinding} from '@angular/core'; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html' 
}) 
export class AppComponent { 
    @HostBinding('class') className = 'container'; 
    title = 'app'; 
} 

Und die aktualisierte Vorlage

<div class="col-md-5"> 
    <h1>Welcome to {{title}}!</h1> 
</div> 

<div class="col-md-5"> 
    <h2>Here are some links to help you start: </h2> 
    <ul> 
    <li><h2>x</h2></li> 
    <li><h2>y</h2></li> 
    <li><h2>z</h2></li> 
    </ul> 
</div> 

Wenn ich meine Browser-Entwickler-Tools verwenden, um die generierte Seite zu inspizieren, die Klasse ist es (mein app-Root-Tag hat die Klasse = "container" Attribut darauf, aber der Stil ist falsch. Fehle ich etwas oder missverstehe etwas, wenn es um HostBinding geht?

Answer 1

ich einige Annahmen über die App zu machen, aber ich denke, das Problem ist, dass Sie wahrscheinlich es in Ihrem Stammkomponente zu verwenden versuchen, was bedeutet, dass es diese Klasse auf einem übergeordneten Element gesetzt werden versuchen, das Angular hat keine Kontrolle über.

Wenn Sie innerhalb Ihrer app-root eine untergeordnete Komponente hatten, können Sie in der untergeordneten Komponente @HostBinding('class') className = 'container'; verwenden, um eine Klasse für die übergeordnete Komponente (app-root) festzulegen.