クラスを適用するときにHostBindingが正常に動作しない

Question

コンポーネントの作成時によくある慣習についての記事を読んでいました。記事で言及されたことの1つは、コンポーネントによって生成されたすべてをグループ化するために、コンポーネントテンプレートに余分なタグ（のような）を追加することでした。これは、コンポーネントによって生成されたすべてがセレクタタグにグループ化されているため、不要です。意味があるので、私はこれを自分のコードで掃除しようと思っていました。

@HostBindingを使用してコンポーネントにスタイルクラスを適用し、不要なタグを削除したいと考えましたが、機能していないため、何が間違っているのか分かりません。ここに基本的な例があります。私が適用しようとしているクラスは、ブートストラップのCSSです。私がしたいようにこの作品

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

とテンプレート

<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> 

：前

。コンテナは画面の中央に配置されます。

テンプレートから一番外側のdivを削除し、コンポーネントに@HostBindingを追加しました。

後：

<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> 

私は生成されたページを閲覧するために私のブラウザの開発ツールを使用して、クラスがある

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

そして、更新されたテンプレート（私のアプリ-ルートタグは、クラスを持っています= "container"属性）、スタイルは正しくありません。 HostBindingに関して何か不足しているとか誤解していますか？

Answer 1

あなたのアプリについていくつかの仮定をしていますが、おそらくあなたのルートコンポーネントでそれを使用しようとしている可能性があります。つまり、そのクラスを親要素に設定しようとしていますAngularは制御できません。

app-rootに子コンポーネントがある場合は、子コンポーネントの@HostBinding('class') className = 'container';を使用して、親（app-root）コンポーネントのクラスを設定できます。