标签: angular-flex-layout

点击查看原图

我想使屏幕像所附的图像一样，但是出现一些问题。我的代码在小型设备和大型设备上都可以正常运行，但在中型设备上则不能正常运行。因此，任何人都可以调查我的代码并帮助我解决此问题。实际上，我对Flex布局网格系统不感到困惑。在Bootstrap中实现此目标非常容易，但我希望在Flex Layout中实现相同的目标。

    <div fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxLayoutAlign.lg="start center"
     fxLayoutAlign.xs="center center" fxLayoutAlign.sm="center center">

  <div fxFlex="25%" fxFlex.md="50%" fxFlex.sm="100%" fxFlex.xs="100%" fxLayout.md="row"
       class="pading_card">
    <mat-card class="example-card">
      <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>Shiba Inu</mat-card-title>
        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
      </mat-card-header>
      <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
      <mat-card-content>
        <p>
          The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
          A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
          bred for hunting.
        </p>
      </mat-card-content> …

使用 Angular Flex Layout 时，我注意到它应用于flex: 0 1 1e-09px元素。

只是想知道这1e-09px意味着什么，以及这是该字段的有效值还是只是一个错误。

我正在尝试flex-layout使用此命令进行安装npm install --save @angular/flex-layout.

我收到这些错误:

node version:v10.1.0
npm version:6.0.1
Angular:6.1.2

我branches为该项目创建了很多Visual studio code(vscode),在最后branch这个安装成功了,在package.json文件中它以依赖为"@ angular/flex-layout"显示:"^ 6.0.0-beta.18",

现在在新的branch我尝试使用相同的命令安装.现在在package.json文件中,依赖关系就像这个"@ angular/flex-layout":"^ 7.0.0-beta.19",并得到errors如图所示上面的图像.

我怎样才能安装特定版本的flex-layout手段version 6？

我已将 Angular 版本从 5.2 升级到 7.2.0，并使用以下版本的软件包：

“ @angular/flex-layout ”：“ ^7.0.0-beta.22 ”，打字稿版本：3.2.2，“ @angular/cdk ”：7.2.1，“ @angular/cli：7.1.4 ”

我收到构建错误：

“MediaQueryListEvent”不可分配为 MediaQueryList 类型。

代码：

export class LayoutComponent implements OnInit, OnDestroy {

  private _router: Subscription;

  mediaMatcher: MediaQueryList = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);
  url: string;
  sidePanelOpened;

  constructor (
    private _element: ElementRef,
    private router: Router) {
    this.mediaMatcher.addListener(mql => zone.run(() => {
      this.mediaMatcher = mql; //i am getting error here Type 'MediaQueryListEvent' is not assignable to type 'MediaQueryList'.
                  //Property 'onchange' is missing …

我想在一行中有 2 个表单输入字段：1. 第一个有固定的，1. 第二个应该增长和缩小，但这不会缩小到 180px 以下。

这是一个完整的堆栈闪电战示例

当您启动应用程序时，我们会看到这一点

有可能另一个问题：
我认为第二个输入字段应该已经显示提示文字和水平线-但它只会显示它时，它得到的焦点。
这是预期的行为还是我错过了什么？

反正。主要问题是第二个字段没有按预期缩小。它不会缩小到 180 像素以下：

在 chrome dev-tool 中，我可以看到input元素用 a 包裹，div class="mat-form-field-infix">并且类mat-form-field-infix的宽度固定为 180px！

我想出的唯一解决方法是使用 using 覆盖此宽度::ng-deep。
您可以在 Stackblitz 示例的co-input-field.component.scss文件中激活它

:host ::ng-deep .mat-form-field-infix {
  // width: auto !important;
  width: unset !important;
}

使用此解决方法，第二个输入会按预期缩小：

但是::ng-deep 已被弃用并将被删除。
那么使输入按预期缩小的正确方法是什么？

我有以下 div，它在导航栏上显示一个登录按钮，但如果屏幕很小，我想隐藏这个按钮。出于某种原因，当我将fxHide.gt-sm=true屏幕缩小时，它不会隐藏。我怎样才能解决这个问题？

 <div fxHide.gt-sm="true">
      <ng-template #login>
          <button 
          mat-icon-button
          [routerLink]="['/auth']" 
          [style.width]="'auto'"
          [style.overflow]="'visible'"
          matTooltip="Login or Register"
          class="topbar-button-right">
            <span>Login</span>
            <mat-icon>exit_to_app</mat-icon>
          </button>
        </ng-template>
 </div>

StackBlitz（实时演示）

<div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="space-around center" fxLayoutGap="10px">
  <mat-card *ngFor="let o of cards">
    <mat-card-header>
      <div mat-card-avatar class="example-header-image"></div>
      <mat-card-title>{{o.title}}</mat-card-title>
      <mat-card-subtitle>{{o.subtitle}}</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image [src]="o.url" alt="Photo of {{o.title}}">
    <mat-card-content>
      <p>
        {{o.content}}
      </p>
    </mat-card-content>
  </mat-card>
</div>

在cards组件上的哪里定义为：

// const url = 'https://material.angular.io/assets/img/examples/shiba2.jpg';
cards: {title: string, subtitle: string, content: string, url: string}[] = [
  { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url },
  { title: 'Title', subtitle: 'Subtitle', content: 'Content here', url },
  { title: 'Title', subtitle: 'Subtitle', content: 'Content …

在 Angular 组件中，我使用以下代码根据屏幕分辨率显示不同的元素：

constructor(private mediaObserver: MediaObserver) {}

private mySubscription: Subscription;

public ngOnInit(): void {
    this.mySubscription = this.mediaObserver.asObservable().subscribe(() => {
        if (this.mediaObserver.isActive('gt-md')) {
          // Do some stuff...
        }
      }
    );
  }

我的问题是，我是否需要取消订阅mySubscriptionin ngOnDestroy()，还是需要MediaObserver自行取消订阅？