自定义角度组件未渲染

Question

我正在尝试创建一个基于材料角度的自定义可重用组件 我有以下代码 dropdown.component.ts

import {MatSelectModule} from "@angular/material/select";
import {MyOptionComponent} from "./dropdown-options.component";


@Component({
  selector: 'app-dropdown',
  standalone: true,
  imports: [
    MatSelectModule,
    MyOptionComponent
  ],
  template: `<mat-select><ng-content></ng-content></mat-select>`,
  styleUrl: './dropdown.component.scss'
})
export class DropdownComponent implements  AfterContentInit{
  ngAfterContentInit(): void {
      console.warn('AfterContentInit', this.children);
  }
  @ContentChildren(MyOptionComponent) children!: QueryList<MyOptionComponent>;

}

下拉菜单 下拉选项.component.ts

@Component({
  selector: 'my-option',
  standalone: true,
  template: `<option value="{{value}}">{{label}}</option>`, 
})
export class MyOptionComponent {
  @Input() label: string = ''; // Display text
  @Input() value: any;         // Value for the dropdown
}

然后我尝试使用它：

<app-dropdown>
<my-option label="test" value="1" ></my-option>
  <my-option label="test" value="1" ></my-option>
  <my-option label="test" value="1" ></my-option>
</app-dropdown>

console.warn('AfterContentInit', this.children);

带回子元素，但它们永远不会显示在DOM中

有人知道我错过了什么吗？

Answer 1

检查您的导入是否父组件（您共享其 html 的组件）在导入中导入了下拉组件。 检查父组件的 ts 文件，查找是否缺少导入，对于该组件，如果一切看起来都很好但仍然无法正常工作，请向我显示您正在使用此下拉列表 ts 和 htlm 的父组件以及该模块的路由文件父组件是 的一部分。