标签: angular-flex-layout

我对 Angular 非常陌生，我正在尝试创建一个比默认输入字段更长的表单。这是我当前的代码：

person.component.html

<form class="new-person-form">
    <mat-card>
        <mat-form-field>
            <input matInput placeholder="Name">
        </mat-form-field>
        <mat-form-field>
            <input matInput placeholder="Birthday">
        </mat-form-field>
        <mat-checkbox>Active</mat-checkbox>
    </mat-card>
</form>

person.component.css

.mat-form-field {
    padding: 10px;
}

.mat-checkbox {
    padding: 10px;
}

person.component.html

<form class="new-person-form">
    <mat-card fxLayout="row">
        <mat-form-field>
            <input matInput placeholder="Name" fxFlex="50">
        </mat-form-field>
        <mat-form-field>
            <input matInput placeholder="Birthday" fxFlex="25">
        </mat-form-field>
        <mat-checkbox fxFlex="25">Active</mat-checkbox>
    </mat-card>
</form>

person.component.css

.mat-form-field {
    padding: 10px;
}

.mat-checkbox {
    padding: 10px;
}

这是结果：

|                                                                          |
|   Name___________  Birthday_______  [] Active                            |
|                                                                          |

我试图加长Name到页面的 50% 左右，所以是这样的：

| …

如何在我的应用程序中设置页脚（我使用 Angular Material），以便它：

1. 如果内容高度小于视口，则粘在底部
2. 如果内容高度超过视口，则向下移动/被向下推

更重要的一件事 - 我想通过angular/flex-layout来实现这一点，而不是通过标准的 HTML/CSS 'flex-box'。

<mat-sidenav-container>
  <mat-sidenav #sidenav
    fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">

    <mat-nav-list>
      <mat-list-item *ngFor="let li of listItems" routerLink="{{li.link}}">
        <mat-icon mat-list-icon>{{li.icon}}</mat-icon>
        <p mat-line>{{li.name}}</p>
      </mat-list-item>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>

    <app-header (menuButtonClick)="sidenav.toggle()"></app-header>

    <ng-content select="[outlet]"></ng-content>

    <app-footer></app-footer>

  </mat-sidenav-content>
</mat-sidenav-container>   

谢谢你们。

我正在使用Angular w/Angular Material和Flex Layout

我正在尝试为Web应用程序创建一个与此站点完全相同的布局.注意固定标题,固定侧边栏,固定内容的痛苦.没有使用浏览器滚动,只有div滚动并完全适合浏览器视口.

这是我用来给我基本结构的html:

<md-toolbar color="primary">
  <span>Application Title</span>
</md-toolbar>
  <md-sidenav-container>
    <md-sidenav mode="side" opened="true">Drawer content</md-sidenav>
    <div class="my-content">Main content</div>
  </md-sidenav-container>

另外我设置了以下样式:

    html, body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
md-sidenav-container, .main-content {
  margin: 0;
  width: 100%;
  height: 100%;
}

我注意到没有页面上的工具栏,一切都很完美.所以我添加了一个填充底部:64px; 到md-sidenav-container,.main-content类.似乎它修复了内容,但不是sidenav.sidenav滚动条仍然在浏览器窗口下方.

如果有人能告诉我如何使用flex指令,我确实已经安装了flex-layout到我的Angular应用程序.否则,普通的CSS也没关系.

我尝试在我的应用程序中使用2.0.0-beta.9,一个简单的测试不起作用

<div fxLayout="row">
    <div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>

显示列而不是行

我想我正在正确地导入库

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

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

import {TestApp} from "./test-app";

@NgModule({
  imports: [ 
    BrowserModule,
    FlexLayoutModule
  ],
  declarations: [ TestApp ],
  bootstrap: [ TestApp ]
})
export class TestAppModule {

} 

我从angular-material和angular-flex-layout中了解到，当他们导出一个组件时，他们首先在public-api.ts中导出相关的子组件，然后在index.ts中从public-api.ts中导出所有内容（例如从'./public-api'导出*）。这是其徽章组件的示例：

// 公共 api.ts export * from './badge-module'; export * from './badge';

// index.ts export * from './public-api';

我的问题是为什么不只是将所有导出的东西都放在 index.ts 中，而是将 border 再创建一个 public-api.ts？

我正在尝试将 flex-layout 添加到 angular 应用程序，但是当我这样做并尝试使用它时，应用程序会中断。我已经安装

npm i @angular/flex-layout @angular/cdk

然后在 app.module.ts 中导入

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

import [ FlexLayoutModule ]

我还将打字稿升级到最新版本

npm i typescript@latest

但是当应用程序尝试编译时，我收到各种错误：

ERROR in node_modules/@angular/flex-layout/core/typings/base/base2.d.ts:24:19 - error TS1086: An accessor cannot be declared in an ambient context.

24     protected get parentElement(): HTMLElement | null;
                 ~~~~~~~~~~~~~
node_modules/@angular/flex-layout/core/typings/base/base2.d.ts:26:19 - error TS1086: An accessor cannot be declared in an ambient context.

26     protected get nativeElement(): HTMLElement;
                 ~~~~~~~~~~~~~
node_modules/@angular/flex-layout/core/typings/base/base2.d.ts:28:9 - error TS1086: An accessor cannot be declared in an …

我正在尝试在角度5上使用flex-layout但它不起作用.

这是我的环境:

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.6.1
Node: 9.3.0
OS: darwin x64 …

我正在忙于一个我正在使用angular-flex-layout的项目.据我所知,如果将fxLayoutWrap属性应用于容器,则flex容器应该换行到下一行.由于某种原因,我有一个非常小的x溢出.它曾经更大,然后我删除了我在两个fxLayout行容器上的一些fxLayoutGaps,这使它变得更好.当我将fxLayoutWrap属性应用于父(仪表板组件的第一行)行容器时,我不知道这可能是什么原因.知道我做错了什么吗？

滚动到右侧后页面的图片

https://imgur.com/a/Ga4UR

滚动到右边之前的图片:

https://imgur.com/CWyWO4T

我的代码:

我的主页组件的HTML:

<mat-sidenav-container position="start" class="custom-sidenav-container">
    <mat-sidenav #sidenav mode="side" opened="true">
        Navigation
        <ul class="sn-list">
            <li>                    
                <mat-icon class="sn-item">
                    <i class="material-icons">dashboard</i>
                </mat-icon>
                <a class="sn-item" href="#">Dashboard</a>       
            </li>
            <li>

                <mat-icon class="sn-item">
                    <i class="material-icons">archive</i>
                </mat-icon>             
                <span class="sn-item" [matMenuTriggerFor]="stockSystemMenu">Stok System</span>

                <mat-menu [overlapTrigger]="false" #stockSystemMenu="matMenu">
                    <button mat-menu-item>
                        <mat-icon class="sn-item">
                            <i class="material-icons">chevron_right</i>
                        </mat-icon>
                        <span class="sn-item">Service 1</span>
                    </button>
                    <button mat-menu-item>
                        <mat-icon class="sn-item">
                            <i class="material-icons">chevron_right</i>
                        </mat-icon>
                        <span class="sn-item">Service 2</span>
                    </button>
                    <button mat-menu-item>
                        <mat-icon class="sn-item">
                            <i class="material-icons">chevron_right</i>
                        </mat-icon>
                        <span class="sn-item">Service 3</span>
                    </button>
                </mat-menu>
            </li>           
            <li>
                <mat-icon class="sn-item">
                    <i class="material-icons">shopping_cart</i> …

我在构建角度 Lib 项目时遇到错误：无法将类型实体 i10.BidiModule 解析为符号。还有另外 2 个库项目正在构建良好。这个新的 lib 项目在没有弹性布局和材料的情况下运行良好。但是当我在这个项目中使用柔性布局或材料时，我遇到了以下错误。我已经搜索了很多。有解决方案，例如包含"preserveSymlinks": true在 tsconfig.lib.json 中。不幸的是它不适合我。欢迎对此提供任何帮助。

我使用Angular Material 2,我想要一个卡片头图标按钮.如何将按钮设置在右侧？

我的计划:

当前网站:

我想在标题中设置按钮rop.我该怎么做？我排除了类别代码,因为没有问题.在打字稿中,代码只是一个for循环来添加更多卡片和一个虚拟方法来点击卡片.

.healthy-search {
    width: 100%
}

.healthy-card {
    margin-right: 5px;
    margin-bottom: 5px;
}

<div class="flex-container" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start">
  <div class="flex-item" fxFlex="90%" fxFlex.xs="90%">
    <mat-form-field class="healthy-search">
      <textarea matInput placeholder="Suche"></textarea>
    </mat-form-field>
  </div>
</div>
<div class="flex-container" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start">
  <div class="flex-item" fxFlex="85%" fxFlex.xs="85%">
    <mat-expansion-panel>
    
     <!-- Here is the Category -->
     

     <!--Elements of Category -->

      <div class="flex-container" fxLayoutWrap fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start">
        <div class="flex-item healthy-card" fxFlex="400px" *ngFor="let number of numbers" (click)="cardClick()">
          <mat-card class="example-card">
            <mat-card-header>
              <mat-card-title>Title …