小编Mar*_*nki的帖子

我正在使用角度日期范围选择器并遇到问题：

无法绑定到“rangePicker”，因为它不是“mat-date-range-input”的已知属性。

1. 如果 'mat-date-range-input' 是一个 Angular 组件并且它有 'rangePicker' 输入，那么验证它是否是这个模块的一部分。
2. 如果 'mat-date-range-input' 是一个 Web 组件，则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到该组件的 '@NgModule.schemas' 以抑制此消息。

我也在 app.module.ts 中添加了导入、导出、提供者：

imports: [
    MatNativeDateModule,
    MatDatepickerModule,
    FormsModule,
    ReactiveFormsModule
],
exports:[
  MatDatepickerModule,
  MatNativeDateModule
],
providers: [
  MatDatepickerModule,
  MatNativeDateModule,
]

html中的日期范围选择器：

<mat-form-field appearance="fill">
        <mat-label>Enter a date range</mat-label>
        <mat-date-range-input [rangePicker]="picker">
            <input matStartDate placeholder="Start date">
            <input matEndDate placeholder="End date">
        </mat-date-range-input>
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

我应该在 module.ts 中添加任何其他内容吗？

我正在使用 mat-tab-group，并且希望在向下滚动到内容时修复选项卡标题。因此，我修复了选项卡内容的高度。我可以滚动浏览具有固定标题的内容。但是，然后我在页面上看到两个滚动条，这很奇怪。有没有其他方法可以在滚动内容时修复选项卡标题？附上片段：

<mat-tab-group>
  <mat-tab label="Tab 1">
    <div style="overflow: scroll; height: 50%">
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
  </mat-tab>
  <mat-tab label="Tab 2">Tab 2</mat-tab>
  <mat-tab label="Tab 3">Tab 3</mat-tab>
</mat-tab-group>

[编辑]：我更希望修复 mat-tab 的标题。那么，有没有什么直接的方法可以代替固定样式的高度呢？

我在此结构中有对象数组：

data = [ 
  {
    course: 'Angular',
    students: [
      {name: '', enrolled_date: '', email: ''},
      {name: '', enrolled_date: '', email: ''},
      {name: '', enrolled_date: '', email: ''}
    ]
  },
  {
    course: 'React',
    students: [
      {name: '', enrolled_date: '', email: ''},
      {name: '', enrolled_date: '', email: ''},
      {name: '', enrolled_date: '', email: ''}
    ]
  },
  {
    course: 'React Native',
    students: [
      {name: '', enrolled_date: '', email: ''},
      {name: '', enrolled_date: '', email: ''},
      {name: '', enrolled_date: '', email: ''}
    ]
  } …

我正在尝试理解并尝试 Angular 生命周期挂钩。

关于ngOnDestroy，在官方文档中是这样说的：

当指令、管道或服务被销毁时调用的生命周期挂钩。用于实例销毁时需要进行的任何自定义清理。

因此，我可以ngOnDestroy在重定向页面时触发该事件。ngOnDestroy奇怪的是，当我重新加载页面时，我无法触发。当我重新加载页面时，它不会破坏我的指令和服务吗？为什么ngOnDestroy页面重新加载时不触发？