为什么@HostBinding绑定的class.centered类样式没有生效？

这是Angular默认的**样式封装（View Encapsulation）**机制导致的：
Angular组件默认使用ViewEncapsulation.Emulated模式，会给组件内部定义的所有样式规则自动添加唯一的属性前缀/后缀，来实现样式隔离，避免不同组件的样式互相干扰。
你在组件样式中写的普通.centered选择器，会被Angular编译为类似[_ngcontent-ops-c160].centered的规则，仅能匹配组件模板内部带有对应_ngcontent属性的元素。而你的宿主元素<app-map>上只有_nghost-ops-c160属性，没有对应的_ngcontent属性，所以这条样式规则无法匹配到宿主元素，样式自然不会生效。

推荐使用第一种方案，不会破坏样式隔离也不会污染全局样式：

• 方案1：使用:host()伪类选择器匹配带指定类的宿主元素
  修改你的组件样式代码，把.centered的选择器改成:host(.centered)即可：

  :host {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }
  
  :host(.centered) {
    margin: 0 auto;
    display: block;
  }
  

  Angular会把这个规则编译为匹配带有centered类的当前组件宿主元素，能正常生效。

• 方案2：调整组件视图封装策略（不推荐）
  如果你不需要组件样式隔离，可以在@Component装饰器中关闭封装：

  import { Component, ViewEncapsulation } from '@angular/core';
  
  @Component({
    selector: 'app-map',
    templateUrl: './map.component.html',
    styleUrls: ['./map.component.css'],
    encapsulation: ViewEncapsulation.None // 关闭样式封装
  })
  

  关闭后组件内的所有样式都会变成全局样式，可能和其他组件样式冲突，非必要不要使用。

• 方案3：把样式写到全局样式文件（不推荐）
  你也可以把.centered的样式规则写到项目全局样式文件（通常是根目录下的styles.css/styles.scss）中，全局样式不会被Angular添加属性后缀，可以正常匹配宿主元素，但是同样有污染全局样式的风险，仅适合通用工具类使用。

内容的提问来源于stack exchange，提问作者user15937537