Angular16中Taiga UI Select报错，缺失TuiPortalHostComponent求助

错误信息 #

ERROR Error: Portals cannot be used without TuiPortalHostComponent
    at get safeHost (taiga-ui-cdk-abstract.js:390:19)
    at TuiDropdownPortalService.add (taiga-ui-cdk-abstract.js:398:21)
    at TuiDropdownDirective.toggle (taiga-ui-core-directives-dropdown.js:109:56)
    at Object.next (taiga-ui-core-abstract.js:41:71)
    at ConsumerObserver.next (Subscriber.js:91:33)
    at SafeSubscriber._next (Subscriber.js:60:26)
    at SafeSubscriber.next (Subscriber.js:31:18)
    at distinctUntilChanged.js:14:28
    at OperatorSubscriber._next (OperatorSubscriber.js:13:21)
    at OperatorSubscriber.next (Subscriber.js:31:18)

环境配置 #

项目依赖 #

"dependencies": {
    "@angular/animations": "^16.2.0",
    "@angular/cdk": "^16.0.0",
    "@angular/common": "^16.2.0",
    "@angular/compiler": "^16.2.0",
    "@angular/core": "^16.2.0",
    "@angular/forms": "^16.2.0",
    "@angular/platform-browser": "^16.2.0",
    "@angular/platform-browser-dynamic": "^16.2.0",
    "@angular/router": "^16.2.0",
    "@taiga-ui/cdk": "^3.87.0",
    "@taiga-ui/core": "^3.87.0",
    "@taiga-ui/icons": "^3.87.0",
    "@taiga-ui/kit": "^3.87.0",
    "@taiga-ui/styles": "^3.87.0",
    "@tinkoff/ng-dompurify": "^4.0.0",
    "rxjs": "~7.8.0",
    "taiga-ui": "^3.87.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
 }

AppModule配置 #

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    ReactiveFormsModule,
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    TuiRootModule,
    TuiDialogModule,
    TuiAlertModule,
    TuiSelectModule,
    TuiDataListWrapperModule
  ],
  providers: [{provide: TUI_SANITIZER, useClass: NgDompurifySanitizer}],
  bootstrap: [AppComponent]
})
export class AppModule { }

Select组件模板 #

<form [formGroup]="testForm">
  <tui-select formControlName="testValue">
    <tui-data-list-wrapper
      *tuiDataList
      [items]="items"
    ></tui-data-list-wrapper>
  </tui-select>
</form>

组件代码 #

export class AppComponent {
  testForm = new FormGroup({
    testValue: new FormControl(),
  });

  items = ['1', '2'];
}

问题原因 #

虽然在AppModule中导入了TuiRootModule，但根组件（AppComponent）的模板里没有添加<tui-root>标签。Taiga UI的下拉弹窗这类依赖Portal的组件，需要<tui-root>作为Portal的宿主容器来渲染弹出内容，缺少这个标签会导致找不到Portal宿主，从而抛出错误。

解决方案 #

修改AppComponent的模板，将所有内容包裹在<tui-root>标签内：

<tui-root>
  <form [formGroup]="testForm">
    <tui-select formControlName="testValue">
      <tui-data-list-wrapper
        *tuiDataList
        [items]="items"
      ></tui-data-list-wrapper>
    </tui-select>
  </form>
</tui-root>

内容的提问来源于stack exchange，提问作者Евгений Щемелинин