Angular 7中mat-drawer内子组件内容不显示问题求助

针对你遇到的mat-drawer中KComponent内容为空、仅显示空<em>标签的问题，可按以下步骤排查解决：

1. 确认子组件的模块声明与导入 #

KComponent必须在所属模块中正确声明；若RComponent与KComponent不在同一模块，需确保KComponent所在模块导出该组件，且RComponent的模块已导入此模块。

示例模块配置：

// KComponent所在模块
@NgModule({
  declarations: [KComponent],
  exports: [KComponent] // 允许其他模块调用该组件
})
export class KModule { }

// RComponent所在模块
@NgModule({
  imports: [KModule],
  declarations: [RComponent]
})
export class RModule { }

2. 检查Angular Material依赖模块是否齐全 #

KComponent用到mat-form-field、matInput，父组件用到mat-drawer、mat-button，需在模块中导入对应Material模块：

import { MatSidenavModule } from '@angular/material/sidenav';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [
    MatSidenavModule,
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule
  ]
})
export class YourModule { }

3. 修正mat-drawer的样式问题 #

mat-drawer可能因尺寸设置不当导致内容被隐藏，给.example-sidenav添加基础样式：

.example-sidenav {
  min-width: 250px; /* 确保侧边栏有足够宽度展示内容 */
  padding: 16px; /* 给内容添加内边距，避免贴边不可见 */
}

.example-container {
  height: 100vh; /* 让容器占满视口高度，避免高度为0导致内容被隐藏 */
}

4. 验证组件选择器一致性 #

确认KComponent的@Component装饰器中selector与父组件中使用的标签完全匹配：

@Component({
  selector: 'k-component', // 必须和父组件里的<k-component>标签一致
  templateUrl: './k-component.html'
})
export class KComponent { }

5. 调试组件实例化状态 #

在KComponent的构造函数中添加日志，确认组件是否被正确实例化：

constructor() {
  console.log('KComponent 已初始化');
}

若控制台未输出该日志，说明组件未被实例化，需回到第一步检查模块配置。

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