Angular：ngx-responsive隐藏元素，即使满足条件

Question

我正在使用this库在Angular应用程序（v4.2.4）上实现桌面和移动设备上的不同设计。我使用了ng2-responsive而不是ngx-responsive，如文档中所述。当我在一个元素上设置响应指令时，即使满足设置条件，它也根本不显示。

我目前的实现如下：

<div class="desktop" *responsive="{sizes:{min: 768}}">...</div>
<div class="mobile" *responsive="{sizes:{max: 767}}">...</div>

我正在AppModule的另一个子模块的子模块中导入此模块。

即使改变条件，它似乎也不起作用。我做错了什么？

Answer 1

在AppModule中添加带有forRoot调用的ResponsiveModule。

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    ResponsiveModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }