matTooltip 无法在任何路由组件中工作

Question

登录组件上的

工具提示WORKS未使用loadChildren加载，但搜索组件上的NOT WORKING。唯一的区别是 loadChildren 用于加载搜索组件，而不是用于加载登录组件。通过路由加载时，有没有办法在搜索组件上初始化 matTooltip？

app-routing.module.ts

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
  },
  {
    path: 'search',
    loadChildren: () => import('./search/search.module').then((m) => m.SearchModule),
  }
];
@NgModule({
  declarations: [],
  imports: [RouterModule.forRoot(routes, { enableTracing: false })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

login.component.html

  <mat-form-field>
    <mat-label>Username</mat-label>
    <input matInput  matTooltip="Username" type="text" formControlName="username" required autocomplete="username" data-cy="username" />
  </mat-form-field>

search.component.html

  <mat-form-field>
    <mat-label>Enter search term</mat-label>
    <input matInput  matTooltip="Search Term" type="text" formControlName="searchTerm" required />
  </mat-form-field>

app.module.ts

@NgModule({
  declarations: [AppComponent, LoginComponent],
  imports: [
    ...
    MatTooltipModule,
    BrowserAnimationsModule,
    ...
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Answer 1

@Myles Morrone 是正确的，因为他指出 SearchModule 中缺少“MatTooltipModule”导入

search.module.ts

@NgModule({
  imports: [
    ...
    MatTooltipModule,
    ...
  ],
})
export class SearchModule {}