@Viewchild 看不到 matSort

Question

在我的 Angular 应用程序中，我的 @ViewChild 实例无法填充 HTL matSort。

我的组件.ts：

import { MatSort } from '@angular/material';

export class MyClassComponent {
     @ViewChild(MatSort) sort: MatSort;

}

ngOnInit() {
    console.log(this.sort); // undefined
}

我的组件.html：

<mat-table #table [dataSource]="dataSource" matSort>
           .......................................................
           .......................................................

</mat-table>

我需要使用 matSort 中的 sortChange 但它总是返回未定义。

Answer 1

它将被初始化并在AfterViewInit生命周期钩子中可用：

export class MyClassComponent implements AfterViewInit {
  @ViewChild(MatSort) sort: MatSort;

  ngAfterViewInit() {
    console.log(this.sort); // MatSort{}
  }
}

有关生命周期钩子的更多信息，请访问：https : //angular.io/guide/lifecycle-hooks。

Answer 2

您可能已经在类级别导入了：

import { MatSort, MatTableDataSource } from '@angular/material';

这使得 MatSort 和 MatTableDataSource 类型在您的 .ts 类中可用。但是，您还尝试在组件的 .html 文件中使用相关模块作为指令，为此，您的 app.module.ts 需要导入它们，我使用单独的 NgModule 执行此操作，该 NgModule 导入了我的所有材料组件使用即

material\material.module.ts

import { NgModule } from '@angular/core';

import {
  MatTableModule,
  MatSortModule, 
} from '@angular/material';

@NgModule({
  imports: [
      MatTableModule,
      MatSortModule, 
    ],
  exports: [
      MatTableModule,
      MatSortModule, 
    ]
})
export class MaterialModule { }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';

import { MaterialModule } from './material/material.module';
import { AppComponent } from './app.component';
import { myComponent } from './my/my.component';

@NgModule({
  declarations: [
    AppComponent,
    MyComponent
  ],
  imports: [
    BrowserModule,
    MaterialModule,
    BrowserAnimationsModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 3

我正在使用 Angular 7，解决这个问题的方法是在app.modules.ts中添加MatSortModule。我得到的错误就是这里提到的错误。没有迹象表明 MatSortModule 丢失。

原始答案在这里： Angular 5 - Missing MatSortModule

Answer 4

在 Angular 8 中，我必须使用 setter 和可选参数 static=false：

   @ViewChild(MatSort, {static: false})
   set sort(sort: MatSort) {
      this.sortiments.sort = sort;
      this.selectedSortiments.sort = sort;
   }

我从这里找到了答案： /sf/answers/3326377841/ https://github.com/angular/components/issues/15008#issuecomment-516386055