标签: angular-material2

默认情况下，Angular 2 的 Material 2 中的选项卡内容会左右滑动。有没有办法改变或禁用转换，同时保留所有功能（例如将 html 放入标签的能力，以及干净的模板语法）？

我目前正在使用这种我讨厌的解决方法，但我会离开这里，以防其他人从中受益：

组件.html：

<md-tab-group [selectedIndex]="selectedIndex"
 (selectChange)="changeSelectedIndex($event)">
    <md-tab>
      <template md-tab-label>
        1
      </template>
    </md-tab>
    <md-tab>
      <template md-tab-label>
        2
      </template>
    </md-tab>
</md-tab-group>

<div *ngIf="selectedIndex===0">
  Body for 1
</div>
<div *ngIf="selectedIndex===1">
  Body for 2
</div>

component.ts（每个选项卡组需要不同的 selectedIndex 和 changeSelectedIndex ）：

selectedIndex: number = 0;

changeSelectedIndex(event) {
  this.selectedIndex = event.index;
}

我正在使用Angular材料2,我遇到了这个问题,其中md-sidenav-content只占用了内容的高度.但是,我希望它是100%的高度或内容高度(以最大者为准).请注意,md-sidenav-container的父容器确实具有我想要的完整高度.

但是,在我的应用程序中没有任何地方我使用md-sidenav-content.它似乎是Angular Material 2本身产生的东西.所以我不能改变它的属性.

出现这个问题,我不能让绿色背景跨越整个高度.

// app.component.html
<md-sidenav-container>

<!--side nav-->
<md-sidenav #sidenav mode="over" class="app-sidenav">

    <!--header-->
    <div id="side-nav-header">
    <img id="side-menu-logo" src="../assets/images/logo_small.png"> MyApp
    </div>

    <!--body-->
    <a [mdTooltip]="!isCurrentUserExist ? 'Please login first!': ''" [routerLink]="['/create-timesheet']" (click)="sidenav.close()">Timesheet</a>

</md-sidenav>

<br><br>

<!--main content-->
<router-outlet></router-outlet>
</md-sidenav-container>


// login.component.html
<div id="login-container" class="container-fluid">
    <div class="row">
        <div id="login-component" class="col-md-6 offset-md-3">
            <md-card>

                <h2>Login</h2>

                <br>

                <form name="form" [formGroup]="loginForm" (ngSubmit)="onLogin()">

                    <!--email-->
                    <md-input type="email" placeholder="Email" formControlName="email"></md-input>
                    <label class="errorMessage" *ngIf="!loginForm.controls['email'].valid && loginForm.controls['email'].dirty" for="email">
            Email is required</label>

                    <!--password-->
                    <md-input type="password" placeholder="Password" formControlName="password"></md-input>
                    <label class="errorMessage" *ngIf="!loginForm.controls['password'].valid && loginForm.controls['password'].dirty" …

我无法为路由工作制作标签(来自angular material 2 docs):

组件:

export class AppComponent {
  navLinks: [
    '/groups',
    '/objects'
  ]
}

HTML:

<nav md-tab-nav-bar>
  <a md-tab-link
     *ngFor="let link of navLinks"
     [routerLink]="link"
     routerLinkActive #rla="routerLinkActive"
     [active]="rla.isActive">
    {{tabLink.label}}
  </a>
</nav>

<router-outlet></router-outlet>

日志中没有错误可能是显而易见的,但仍然......

("[routerLink]")在包含卡片的整个组件周围放置锚标记会更改样式（创建链接类以尝试禁用样式无济于事）。

动态创建（例如ngFor）卡（在这种情况下为md卡）作为可点击链接的正确方法是什么？

换句话说，每个卡都是可单击的，并链接到不同的视图。

我正在使用Angular Material 2，并且尝试在md-checkbox上应用CSS。到目前为止，我设法更改了背景色，但是没有关于如何应用边框色的文档。

我的高度-宽度代码：

:host /deep/ .mat-checkbox-inner-container{
     height:15px;
     width:15px; 
}

检查背景色的代码：

 :host /deep/  .mat-checkbox-checked .mat-checkbox-background {
    background-color: #72addc;
} 

但仍然不能应用于边框颜色。

欢迎任何帮助！

我在Angular应用程序上设置了一个排序过滤器，该过滤器通过md-radio-group使用单选按钮，以便用户可以在数据表显示中选择首选的排序方法。单选按钮按预期工作。但是，我还有一个“恢复默认值”按钮，可以用来清除所有单选按钮选择并返回默认排序。到目前为止，我很难清除单选按钮。

这是我的视图代码如下所示：

    <filter-option name="Sort"
            placeholder="Select Sorting Option"
            [usePlaceholder]="!value"
            [visible]="sortFilters.enabled">
        <filter-label>{{value | capitalize}}</filter-label>
        <filter-menu>
            <md-radio-group class="mat-radio-label-content">
                <md-radio-button value="alphabetical" class="vert-radiobox-list" (click)="onSortClicked(value = 'alphabetical')">
                    Alphabetical
                </md-radio-button>
                <md-radio-button value="reverse alphabetical" class="vert-radiobox-list" (click)="onSortClicked(value = 'reverse alphabetical')">
                    Reverse Alphabetical
                </md-radio-button>
                <md-radio-button value="numeric ID" class="vert-radiobox-list" (click)="onSortClicked(value = 'numeric ID')">
                    Numeric ID
                </md-radio-button>
            </md-radio-group>
            <button md-button class="restore-button" (click)="clearSortingFilters()">Restore Defaults</button>
        </filter-menu>
    </filter-option>

在我的组件中，这具有初始化过滤器的功能：

sortFilters =
{
    enabled: true,
    value: false
};

这是按钮上附带的用于清除排序过滤器的功能：

clearSortingFilters()
{
    this.sendSort.emit(this.value = '');
}

现在，在上面的功能中，this.sendSort.emit(this.value = '')完成清除显示在过滤器标签区域中的选择。但是，如何清除md-radio-group单选按钮选择呢？

嗨，我使用的是角4和材质2。我在下拉菜单中选择了多个选项。我可以显示带有多选选项的下拉菜单。现在，我想在选择下拉列表中实现搜索/过滤器选项。您能否让我知道，在material2中有什么方法可以实现这一点，还是我需要实现自己的可搜索组件？是否有<mat-select-header>之类的东西？

也许这是一个琐碎的问题，但我始终无法找到任何答案。

在我的Angular 5应用中，我的HTML是这样的：

<button mat-raised-button color="accent" class="submit-button" aria-label="{{'REGISTER.CREATE' | translate}}"
        [disabled]="registerForm.invalid">
    {{'REGISTER.CREATE' | translate}}
</button>

产生以下错误：

Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'aria-label' since it isn't a known property of 'button'. ("             </div>

                <button mat-raised-button color="accent" class="submit-button" [ERROR ->]aria-label="{{'REGISTER.CREATE' | translate}}"
                        [disabled]="registerForm.inval"): ng:///Register2Module/FuseRegister2Component.html@76:79
syntaxError

但是如果我写：

<button mat-raised-button color="accent" class="submit-button" aria-label="SOME DIRECT TEXT"
        [disabled]="registerForm.invalid">
    {{'REGISTER.CREATE' | translate}}
</button>

我一点都没有错。

这是我无法理解的。这是angular的Google MAT实现的问题吗？还是我错过了一些东西？

先感谢您

我正在将angular6与angular材料一起使用来创建这个简洁的网站。

我正在使用mat-form-fieldwith，mat-input因此显示带有文本的文本输入元素placeholder。

占位符文本位置具有两种状态。

一！当文本输入为空并且您没有专注于该元素时：

当您专注于输入文本和/或输入文本不为空时，另一个

我希望mat-input元素处于第二状态。在文本输入元素上方显示占位符，即使其中没​​有文本并且我也不关注该元素。

我知道我可以解决这个问题，并为元素的值添加某种空白空间。但是，有没有更优雅的方法来实现我所需要的？

谢谢！！！

如何通过将文本包装在按钮内来确保Angular Material Button内的文本不会溢出。我尝试了以下方法：

的HTML

<div class="cotnainer">
 <button mat-raised-button color="accent">Click me! This is a long text, but I want to to wrap if content is overflowing
 </button>
</div>

的CSS

.container{
  width: 200px;
  height:200px;
  background-color: silver;
}
button{
  max-width: 100%;
}

span, .mat-button-wrapper{ // I have tried all of the following options, but it does not work.
  max-width: 100% !important;
  word-break: break-all !important;
  overflow: hidden !important;
}

这是一个Stackblitz

编辑 当前结果：

期望的结果：（对不起我的图像编辑能力很差）