почему это работает, когда я делаю имя сортировки, например, «sort1», а не просто generi c Matsort?

Question

Я получал ошибку при запуске этой страницы sortChange is undefined. Затем я изменил исходный код @ViewChild(MatSort, { static: true }) sort: MatSort; на @ViewChild('sort1', { static: true }) sort: MatSort;

Теперь он работает !!! Почему это работает? Я не понимаю. Я понимаю, что ViewChild is getting access to the child component. How come MatSortModule can be a child component? because I have added MatSortModule to Dashboard Module not in Dashboard Table ''.

Структура

Dashboard
    - Dashboard Table

export class DashboardTableComponent implements OnInit {
dataSource: DashboardDataTableDataSource;
displayedColumns = [ 
    "userName",
    "firstName",
    "lastName",
    "email",
    "phoneNumber", 
    "actions",
];
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
// @ViewChild(MatSort, { static: true }) sort: MatSort;
@ViewChild('sort1', {static: true}) sort: MatSort;
selection = new SelectionModel<DataTableItemModel>(true, []);

constructor(private dataTableService: DataTableService, ) {}


ngOnInit() {


    this.dataSource = new DashboardDataTableDataSource(
        this.dataTableService
    );

    this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0));
    merge(this.sort.sortChange, this.paginator.page)
        .pipe(
            tap(() => {
                this.loadItems();
            })
        )
        .subscribe();


    this.loadItems(true);
}

HTML

<table mat-table class="lmat-elevation-z8" [dataSource]="dataSource"    matSort
                #sort1="matSort" matSort matSortActive="id" matSortDirection="asc" matSortDisableClear>