小编Neh*_*hal的帖子

棱角材料2日期选择器如何配置为在焦点上自动打开？我在https://material.angular.io/components/datepicker/overview的文档中找不到任何内容.

目前的HTML是这样的:

 <input [mdDatepicker]="myDatepicker" id="inputWeekEnding" name="inputWeekEnding" type="text" class="form-control" show-button-bar="false"
      [(ngModel)]="weekEnding" [mdDatepickerFilter]="weekEndingPickerFilter" (ngModelChange)="weekEndingChanged()"
              required>
<span class="input-group-btn">
  <button type="button" class="btn btn-default" [mdDatepickerToggle]="myDatepicker">
    <i class="glyphicon glyphicon-calendar"></i>              
  </button>
</span>
<md-datepicker #myDatepicker md-open-on-focus ></md-datepicker>

我在Angular Material中有输入元素:

<md-input-container>
<input type="text" mdInput placeholder="">
</md-input-container>

当输入具有焦点时,它显示下划线.如何隐藏或删除？

我似乎需要设置null的underlineRef？

我正在使用MdDialogModule来显示一个带有输入字段的Dialog窗口.Modal打开正常,我可以在输入字段中输入文本并提交,但是点击提交按钮,我希望输入表单中的数据返回到调用Dialog组件的主组件,并关闭对话框.

我该怎么做呢？我能够将数据传递给MdDialog组件,但没有找到任何关于如何从MdDialogComponent将数据返回到组件的资源.

我的Dialog组件代码如下所示

import { Component, OnInit, InjectionToken, Inject } from '@angular/core';
import { MD_DIALOG_DATA, MdDialogRef } from "@angular/material";

@Component({
  selector: 'app-add-book',
  templateUrl: './add-book.component.html',
  styleUrls: ['./add-book.component.css']
})
export class AddBookComponent {

  constructor() { }

}

调用对话框的主要组件中的方法如下所示.现在没有返回任何响应,它返回Undefined,因为我还没有想出来.

openCreateDialog() {
    let dialogRef = this.dialog.open(AddBookComponent)
      .afterClosed()
      .subscribe(response => {
        console.log(response);
      });
  }

我正在开始一个有角度材料的项目.它是否有一个原生系统用于在响应网格中定位元素,如bootstrap？

否则,将材料设计与引导程序结合用于网格系统是否可行？

也许我对这个问题采取了错误的方法.

我遵循了官方指南并创建了app-theme.scss以下内容:

@import '~@angular/material/theming';    
@include mat-core();    
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);    
$candy-app-warn:    mat-palette($mat-red);    
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);    
@include angular-material-theme($candy-app-theme);

内容styles.css:

@import './app-theme.scss';

但是,我在编译期间总是遇到以下错误:Module not found: Error: Can't resolve '@angular/material/theming'.我该怎么做才能让它发挥作用？

我是Angular 2 Material的新手,我正在尝试自定义md-menu组件的样式.

<md-icon class="material-icons" [mdMenuTriggerFor]="menu">dehaze</md-icon>
<md-menu #menu="mdMenu" [overlapTrigger]="false">
  <button md-menu-item>Item 1</button>
  <button md-menu-item>Item 2</button>
</md-menu>

预定义的样式设置工作正常(例如将菜单设置为非重叠),但我想将md菜单设置为100%宽度并在md-icon按钮之间留出一点空间,这会扩展菜单,我不能使用Angular 2 Material的预定义指令.

到目前为止,我找到了使用/ deep/css命令的解决方案,但我读到主要浏览器不再支持该命令.

定制Angular 2 Material组件的好方法是什么？我怎样才能设置我的md菜单样式,以便它具有100%的宽度和扩展按钮之间的一些空间？

为了说明我在说什么: 菜单草稿

我有一个md表,显示了一些记录和下面的分页符.我想在桌子上显示一个fab按钮(内容表将在它下面运行).

我尝试了什么？我<a md-mini-fab routerLink="." style=""><md-icon>check</md-icon></a>在<md-table #table [dataSource]="dataSource" mdSort> </md-table>标签内部尝试了,但看起来像下面的所有内容都md-table被废弃了,然后表格行由material2 Table组件呈现.

是否有一个干净的(没有使用很多CSS,而只使用类)解决方案呢？如果不是什么是基于CSS的解决方案？

我无法找到如何使Angular Material Tab组件居中.

可以在这里看到:https: //material.angular.io/components/tabs/overview

我认为甚至还有一种方法可以做到这一点,目前还不清楚该做什么.

以下是文档的屏幕截图.属性是什么意思？它是在HTML中还是需要在打字稿中设置？

我将衷心感谢您的帮助.

我希望它只是即插即用:-)我一直在喋喋不休地打了几个小时没有我的小实验工作.md数据表是新的,因此Web上几乎没有神圣的知识.找到将Firebase连接到桌面的好方法将是一个良好的开端.有任何想法吗？

目前我有这个设置.我的代码很好,没有带有标准Angular设置和代码的表,使用ngFor并从模板创建列表.因此代码使用AngularFire 2从Firebase传递数据.尝试新的md数据表是个问题.

首先,模板不会渲染.我知道我已正确设置NgModule,所以我怀疑数据源没有连接并创建此错误.这是Chrome控制台中的错误.

Template parse errors:
Can't bind to 'dataSource' since it isn't a known property of 'md-table'.
1. If 'md-table' is an Angular component and it has 'dataSource' input, then verify that it is part of this module.

我的members- search.component.html看起来与官方文档完全相同,只是我更改了模板绑定:

<md-table #table [dataSource]="dataSource">

<ng-container cdkColumnDef="memberName">
    <md-header-cell *cdkHeaderCellDef> Name </md-header-cell>
    <md-cell *cdkCellDef="let row"> {{member.firstName}} {{ member?.lastName }} </md-cell>
</ng-container>

members-search.component.ts包含以下相关部分:

import { DataSource } from '@angular/cdk';

@Injectable()
export class MembersAdminService {

  private members$: FirebaseListObservable<Member[]>;
  private dataSource: DataSource<any>;

  constructor(
      private …

我有角度4的routerLinkActive问题.我有这个设置.

export const FruitRoutes = [
    {
        path: 'fruits/:id', component: FruiteNav,
        children: [
            {path: '', component: FruitGeneral},
            {path: 'settings', component: FruitSettings}
        ]
    }
];

这是一个单一水果的标签页.例如:fruits/4(常规标签)和水果/ 4 /设置(设置标签)

选项卡导航器(FruitNav)设置如下,它适用于大多数情况:

 <ul class="nav nav-tabs">
        <li class="nav-item">
            <a [routerLink]="['/fruits', fruitId]" class="nav-link" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">General</a>
            </li>
            <li class="nav-item">
                <a [routerLink]="['/fruits', fruitId,'settings']" class="nav-link" routerLinkActive="active">Settings</a>
            </li>
        </ul>

    <router-outlet></router-outlet>

现在的问题是:这条路线目前处于水果/ 4.如果我在任何子选项卡中,甚至在主nav类中,并且调用另一个fruitId,则routerLinkActive将不起作用.例如:

<a style="color:#fff" [routerLink]="['/fruits', 5,'settings']" class="nav-link">Test</a>

将导航到fruit/5,但不会激活/选择任何选项卡

典型的用例可以是用户可以导航到的类似水果的列表.

有人有解决方案吗？