From a9b0cb93c9161fb7cafe6f675952cd744f717b31 Mon Sep 17 00:00:00 2001
From: JounQin <admin@1stg.me>
Date: Fri, 20 Oct 2023 09:45:45 +0800
Subject: [PATCH] fix: check includes on init and known reference issues (#516)

---
 .changeset/young-buttons-cross.md         |  5 +++++
 src/anchor/anchor.component.ts            |  3 +--
 src/paginator/paginator.component.spec.ts |  8 +-------
 src/select/base-select.ts                 |  5 +++--
 src/select/validators.ts                  | 14 ++++++++------
 5 files changed, 18 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/young-buttons-cross.md

diff --git a/.changeset/young-buttons-cross.md b/.changeset/young-buttons-cross.md
new file mode 100644
index 000000000..e6366c532
--- /dev/null
+++ b/.changeset/young-buttons-cross.md
@@ -0,0 +1,5 @@
+---
+"@alauda/ui": patch
+---
+
+fix: check includes on init and known reference issues
diff --git a/src/anchor/anchor.component.ts b/src/anchor/anchor.component.ts
index eaf96dd7a..06f2a4167 100644
--- a/src/anchor/anchor.component.ts
+++ b/src/anchor/anchor.component.ts
@@ -26,7 +26,6 @@ import {
 import { buildBem, isTemplateRef, last } from '../utils';
 
 import { AnchorDirectiveChild } from './anchor.directive';
-import { AnchorModule } from './anchor.module';
 import { AnchorItem, AnchorTreeItem } from './types';
 import { getAnchorTreeItems } from './utils';
 
@@ -38,7 +37,7 @@ const bem = buildBem('aui-anchor');
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [NgFor, NgIf, NgTemplateOutlet, AnchorModule],
+  imports: [NgFor, NgIf, NgTemplateOutlet],
 })
 export class AnchorTreeComponent
   extends AnchorDirectiveChild
diff --git a/src/paginator/paginator.component.spec.ts b/src/paginator/paginator.component.spec.ts
index 43571738d..5aac02d3e 100644
--- a/src/paginator/paginator.component.spec.ts
+++ b/src/paginator/paginator.component.spec.ts
@@ -2,8 +2,6 @@ import { Component, DebugElement, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
-import { SelectComponent } from '../select/select.component';
-
 import { PaginatorComponent } from './paginator.component';
 
 describe('PaginatorComponent', () => {
@@ -116,11 +114,7 @@ describe('PaginatorComponent', () => {
     </aui-paginator>
   `,
   standalone: true,
-  imports: [
-    PaginatorComponent,
-    // https://github.com/angular/angular/issues/51568
-    SelectComponent,
-  ],
+  imports: [PaginatorComponent],
 })
 class TestComponent {
   currentPage = 1;
diff --git a/src/select/base-select.ts b/src/select/base-select.ts
index da6ce1cba..cf9e89ee4 100644
--- a/src/select/base-select.ts
+++ b/src/select/base-select.ts
@@ -12,6 +12,7 @@ import {
   QueryList,
   ViewChild,
   ViewChildren,
+  forwardRef,
 } from '@angular/core';
 import {
   BehaviorSubject,
@@ -143,10 +144,10 @@ export abstract class BaseSelect<T, V = T>
   @ContentChild(OptionContentDirective)
   protected optionContent?: OptionContentDirective;
 
-  @ViewChildren(OptionComponent)
+  @ViewChildren(forwardRef(() => OptionComponent))
   customOptions: QueryList<OptionComponent<T>>;
 
-  @ContentChildren(OptionComponent, { descendants: true })
+  @ContentChildren(forwardRef(() => OptionComponent), { descendants: true })
   contentOptions: QueryList<OptionComponent<T>>;
 
   isTemplateRef = isTemplateRef;
diff --git a/src/select/validators.ts b/src/select/validators.ts
index f1cf56f91..825f0f30b 100644
--- a/src/select/validators.ts
+++ b/src/select/validators.ts
@@ -6,13 +6,13 @@ import {
   Validator,
   ValidatorFn,
 } from '@angular/forms';
+import { startWith } from 'rxjs';
 
 import { coerceAttrBoolean } from '../utils';
 
 import { SelectComponent } from './select.component';
 import { TrackFn } from './select.types';
 
-// @dynamic
 // eslint-disable-next-line @typescript-eslint/no-extraneous-class
 export class AuiSelectValidators {
   static includes<T>(
@@ -64,11 +64,13 @@ export class IncludesDirective<T> implements Validator, AfterContentInit {
   constructor(private readonly selectRef: SelectComponent<T>) {}
 
   ngAfterContentInit() {
-    this.selectRef.contentOptions.changes.subscribe(() => {
-      if (this.onValidatorChange) {
-        this.onValidatorChange();
-      }
-    });
+    this.selectRef.contentOptions.changes
+      .pipe(startWith(this.selectRef.contentOptions))
+      .subscribe(() => {
+        if (this.onValidatorChange) {
+          this.onValidatorChange();
+        }
+      });
   }
 
   registerOnValidatorChange(fn: () => void) {