angular - 如何为 Angular 5 安装 if-media 模块

Question

我是角度的新手，并试图根据屏幕尺寸显示/隐藏文本。我想隐藏选项卡视图中的一些内容和移动视图中的一些内容。我正在寻找解决方案，并找到了ng2-if-media 的一个链接。我安装了这个模块，但它似乎适用于 Angular 2 而不是 Angular 5。

运行后我在 app.module.ts 文件中添加了 mediaConfig 常量npm install --save ng2-if-media

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { RECAPTCHA_SETTINGS, RecaptchaModule, RecaptchaSettings } from 'ng-recaptcha';
import { RecaptchaFormsModule } from 'ng-recaptcha/forms';
import { AgmCoreModule } from '@agm/core';
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
import { DeviceDetectorModule } from 'ngx-device-detector';

import { environment } from '../environments/environment';
import { ApiModule, ProfileService, PropertyService } from './api';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthModule } from './auth';
import { DummyComponent } from './dummy.component';
import { InterceptorsModule } from './interceptors';
import { LoginComponent } from './login/login.component';
import { NavbarComponent } from './navbar/navbar.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { ProfileComponent } from './profile/profile.component';
import { SharedModule } from './shared';
import { UserModule } from './user';
import { SignupFormComponent } from './user/signup-form/signup-form.component';
import { SearchComponent } from './search/search.component';
import { SearchResultlistComponent } from './search/search-resultlist/search-resultlist.component';
import { SearchResultComponent } from './search/search-result/search-result.component';
import { ProfileSearchFormComponent } from './profile/profile-search-form/profile-search-form.component';
import { ProfileViewComponent } from './profile/profile-view/profile-view.component';
import { ProfileEditComponent } from './profile/profile-edit/profile-edit.component';
import { ErrorComponent } from './error/error.component';
import { InquiriesComponent } from './inquiries/inquiries.component';
import { InquiryItemComponent } from './inquiries/inquiry-item/inquiry-item.component';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { NgxIntlTelInputModule } from 'ngx-intl-tel-input';
import { TenantDetailComponent } from './profile/tenant-detail/tenant-detail.component';
import { IfMediaModule } from 'ng2-if-media';

const mediaConfig = {
  breakpoints: {
    tablet: {
      value: '768px',
      param: 'width'
    },
    budgetHeight: {
      value: '480px',
      param: 'height'
    },
    widescreen: {
      value: '1280px',
      param: 'width'
    },
    print: {
      media: 'print'
    },
    landscape: '(orientation: landscape)'
  },
  vendorBreakpoints: ['bootstrap'],  // include 3rd party namespace
  throttle: 100
};

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    NavbarComponent,
    SignupFormComponent,
    DummyComponent,
    PropertyComponent,
    PropertySearchFormComponent,
    PropertyViewComponent,
    SearchComponent,
    SearchResultlistComponent,
    SearchResultComponent,
    ProfileSearchFormComponent,
    NotFoundComponent,
    ProfileComponent,
    ProfileViewComponent,
    ProfileEditComponent,
    ErrorComponent,
    InquiriesComponent,
    InquiryItemComponent,
    PropertyEditComponent,
    InquiryItemFormComponent,
    AccountComponent,
    AccountViewComponent,
    AccountEditComponent,
    PasswordResetComponent,
    PasswordResetSendComponent,
    PasswordResetSubmitComponent,
    UserAuthentificationComponent,
    GlobalNotificationsDirective,
    SearchInfoWindowComponent,
    DashboardComponent,
    TenantDetailComponent,
  ],
  imports: [
    NgbModule.forRoot(),
    AgmCoreModule.forRoot({
      apiKey: environment.googleMapApiKey,
      libraries: ["places"]
    }),
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    RecaptchaModule.forRoot(),
    RecaptchaFormsModule,
    AppRoutingModule,
    ApiModule.forRoot(),
    AuthModule.forRoot(),
    InterceptorsModule,
    SharedModule,
    UserModule,
    [FroalaEditorModule.forRoot(), FroalaViewModule.forRoot()],
    [Ng4LoadingSpinnerModule.forRoot()],
    DeviceDetectorModule.forRoot(),
    BsDropdownModule.forRoot(),
    NgxIntlTelInputModule,
    IfMediaModule.withConfig(mediaConfig)
  ],
  providers: [
    {
      provide: RECAPTCHA_SETTINGS,
      useValue: { siteKey: environment.recaptchaSiteKey } as RecaptchaSettings
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

在我的 .html 文件中，我使用它就像

<h4 il8n="@@username" class="text-uppercase mb-2" *ifMedia="<tablet">EMMA HAUSER - MANSON</h4>

谁能让我知道我错在哪里，或者这是否适用于角度 5？

标签： angularangular5node-modules