Angular 6中自定义组件CSS样式设置失效，求解决方法

嘿，我来帮你看看问题出在哪！你的代码里有两个关键问题导致样式没生效，我给你拆解一下，再提供几种更靠谱的解决方案：

问题分析 #

1. @ViewChildren返回的是QueryList而非单个元素
   你用了@ViewChildren，它会返回一个包含所有匹配元素的QueryList集合，不是单个ElementRef。所以直接访问this.el.nativeElement会报错，根本没法设置样式。

2. ngOnInit钩子时机不对
   在ngOnInit的时候，组件的视图还没完全初始化完成，这时候DOM元素可能还没渲染出来，操作自然不会生效，应该用ngAfterViewInit钩子，这个阶段视图已经准备好了。

解决方案一：修正父组件的DOM操作方式 #

如果一定要在父组件里设置样式，修改你的app.component.ts如下：

import { Component, ViewChildren, QueryList, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChildren('myflag', {read: ElementRef}) el: QueryList<ElementRef>;

  ngAfterViewInit(){
    // 确保有匹配的组件实例，再取第一个设置样式
    if(this.el.length > 0){
      this.el.first.nativeElement.style.display = 'block';
    }
  }
}

解决方案二：在自定义组件内部用@HostBinding（更推荐） #

Angular推荐组件自己管理宿主元素的样式，这样更符合封装原则。在你的my-custom-cmp.component.ts里添加@HostBinding：

import { Component, HostBinding } from '@angular/core';

@Component({
  selector: 'my-custom-cmp',
  templateUrl: './my-custom-cmp.component.html',
  styleUrls: ['./my-custom-cmp.component.css']
})
export class MyCustomCmpComponent {
  // 直接绑定宿主元素的display样式
  @HostBinding('style.display') displayStyle = 'block';
}

解决方案三：用Angular的:host选择器（最简洁） #

在自定义组件的CSS文件（比如my-custom-cmp.component.css）里，用:host选择器直接设置宿主元素样式：

:host {
  display: block;
}

:host是Angular专门用来定位组件宿主元素的伪类选择器，优先级足够，能直接生效。

小提醒 #

尽量避免在父组件里直接操作子组件的DOM，这会破坏组件的封装性。用后两种方案让组件自己管理样式，代码会更清晰、更符合Angular的最佳实践哦~

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