3

我按照下面的说明安装了 angular Flex-layout，我收到以下未处理的 Promise 拒绝错误：

模板解析错误：无法绑定到“fxFlex”，因为它不是“div”的已知属性。

我用了以下

$ npm install @angular/flex-layout --save

紧随其后的是 app.module.ts

import { FlexLayoutModule } from "@angular/flex-layout";

@NgModule({
  imports: [
    BrowserModule,
    FlexLayoutModule,
    .....
  ],
  // ...
})
export class AppModule {}

在我的 html 中：

<div class="flexDemoContainer">
  <div fxLayout="row" fxLayout.xs="column" fxLayout.sm="column" fxFlex>
    <div fxFlex> I'm above on mobile, and left on larger devices. </div>
    <div fxFlex> I'm below on mobile, and right on larger devices. </div>
  </div>
</div>

编辑：在组件代码中添加部分导入

import { Component,  ViewEncapsulation, OnInit, ViewChild, HostListener, 
OnDestroy, EventEmitter } from '@angular/core';

import { Response } from '@angular/http';

import { ActivatedRoute, Router } from '@angular/router';

import { Subscription, Observable } from 'rxjs/Rx';

import { MdSidenav } from "@angular/material";


@Component({
    selector: '....-book',
    templateUrl: '....-book.component.html',
    encapsulation: ViewEncapsulation.None
})
export class BookComponent implements OnInit, OnDestroy {

    @ViewChild('filtersSidenav') filtersSidenav: MdSidenav;
    @ViewChild('chatSidenav') chatSidenav: MdSidenav;
    @ViewChild('tabGroup') tabGroup;

    .....
}

注意：Material 2 相关组件起作用，而不是 flex-layout。不确定我是否需要在组件中导入 flex 相关的东西。

4

0 回答 0