标签: angular-material

我在app.module中导入了所有角度材质模块

@NgModule({imports: [
CdkTableModule,
MatAutocompleteModule,
MatButtonModule,
MatCardModule,
MatCheckboxModule,
MatIconModule,
MatInputModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule],})
export class AppModule {}

现在我的程序将重定向到登录页面或布局页面.代码如下所示:

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {AuthGuard} from './shared/guard/auth.guard';

const routes: Routes = [
   {path: '', loadChildren: './layout/layout.module#LayoutModule', canActivate: [AuthGuard]},
   {path: 'login', loadChildren: './login/login.module#LoginModule'}];

@NgModule({
   imports: [RouterModule.forRoot(routes, {useHash: true})],
   exports: [RouterModule]
})
export class AppRoutingModule {}

如何使用此处的所有角度材质,而不是在Login.module和Layout.module中再次导入所有材质

我用compoent完成了它:LoginComponent和我工作,但我怎么能在loadChildren中做到这一点？

我想向我的应用程序添加一个对话框，但是由于某种原因它没有显示。

对话框组件：

import { Component, OnInit } from '@angular/core';
import {MatDialogRef} from "@angular/material";

@Component({
  selector: 'app-connect-to-player-dialog',
  templateUrl: './connect-to-player-dialog.component.html',
  styleUrls: ['./connect-to-player-dialog.component.css']
})
export class ConnectToPlayerDialogComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

使用的方法：

connectToPlayer() {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;

    this.dialog.open(ConnectToPlayerDialogComponent, dialogConfig);
  }

我还将对话框添加到entryComponents：

entryComponents: [ConnectToPlayerDialogComponent]

我不知道可能会丢失什么...谢谢您的帮助！

完整代码：

import {Component, OnInit} from '@angular/core';
import {PLAYERS} from '../mock-players';
import {Router} from "@angular/router";
import {AlertService, AuthenticationService} from "../_services";
import {HttpClient} from "@angular/common/http"; …

我需要从订阅服务调用中返回值。这是我的代码

export class RideDataSource extends DataSource<any> {

  rides: Ride[];

  constructor(private _rideService: RidesService,
              private _paginator: MatPaginator) {
    super();
  }

  connect(): Observable<Ride[]> {

this._rideService.getActiveRides(this._paginator.pageIndex, this._paginator.pageSize).subscribe(
      ridePage => {
        this.rides = ridePage.content;
        this._paginator.length = ridePage.totalElements;
      }
    );

    // i need to return  Observable.of(this.rides);
  }

  disconnect() {
    // No-op
  }

}

返回Observable.of（this.rides）将不起作用，因为this.rides将是未定义的。有什么办法吗？

If someone wants to down vote then also add the reason

我在配置中缺少什么吗？请提前建议谢谢

ng版本命令

Versions
Angular CLI: 1.7.0
Node: 8.1.1
OS: win32 x64
Angular: 5.2.5
... common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... router

@angular/animations: 5.2.9
@angular/cdk: 5.2.4
@angular/cli: 1.7.0
@angular/material: 5.2.4
@angular-devkit/build-optimizer: 0.3.1
@angular-devkit/core: 0.3.1
@angular-devkit/schematics: 0.3.1
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.0
@schematics/angular: 0.3.1
@schematics/package-update: 0.3.1
typescript: 2.5.3
webpack-bundle-analyzer: 2.11.1
webpack: 3.11.0

复制步骤

步骤1使用新的任意名称创建新项目。步骤2按照https://material.angular.io/guide/getting-started上的步骤操作， 即

npm install --save @angular/material @angular/cdk
    npm install --save @angular/animations

第三步 …

我正在使用NGRX和UI的Angular材质组件开发Angular应用程序。

一个组件使用手风琴折叠式显示扩展面板列表。这些扩展面板包含信息以及操纵这些信息的方法。

操纵信息后，将向根组件发出一个事件，并向存储分派一个操作，从而修改状态。当商店通过选择器触发这些更改时，订阅商店的根组件会将更改传递到包含mat手风琴和mat-expansion-panels的组件。

问题：发出变更后，席子手风琴的所有扩展面板都关闭了。由于用户应该能够进行进一步的更改，因此这是一个与用户体验有关的非常大的问题。

编辑1： 我将扩展面板的扩展输入设置为truewith <mat-expansion-panel [expaned]="true" ... >，并且行为更改为始终打开所有扩展面板进行任何更改。因此，我认为当输入更改时，似乎重新创建了整个组件。可能是因为我订阅了上面的组件，并且只传递了新数据。请看我是否可以通过在输入中传递可观察值来更改此设置。

编辑2：我派生了ibenjelloun的stackblitz应用程序，并添加了2美分，该示例显示了无法正常工作的行为：https : //stackblitz.com/edit/stackoverflow-49691295-qulg9d我发现了，删除了模仿ngrx的行行为是可行的，但是用折线也无法显示根组件中的示例（糟糕，这应该是我的：看，我不尝试不可能的示例）。这让我有些惊讶，因为我正在使用的应用程序也以相同的方式设置了acordion，但确实可以正常工作。

由于这是工作，我无法显示任何导致问题的原始代码。

我正在使用角度材料在我的角度4应用程序中创建导航抽屉.最初,我正在创建一个工具栏,以便有标题和菜单按钮(mat-icon是菜单)

这是我的代码,

<mat-toolbar class="example-header" color="primary">
    <button mat-icon-button><mat-icon>menu</mat-icon></button>
<span class="header-name">Hello</span>
</mat-toolbar>

但我得到的输出如下,

但我想要输出这样的东西,

输出的差异是,mat-icon按钮具有灰色背景,而所需不具有灰色背景.请指正.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';
import { MapsAPILoader } from '@agm/core';
import { FormsModule } from '@angular/forms';
import { GoogleMapsAPIWrapper } from '@agm/core';
import { AppComponent } from './app.component';
import 'hammerjs';
import {
  MatAutocompleteModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatExpansionModule,
  MatFormFieldModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule, …

我的应用程序中有一个材料扩展面板.当您将鼠标悬停在面板上时,我想展开面板,如果再次离开,我想自动折叠.这可以在my.css文件中实现吗？或者我必须在我的打字稿中这样做以及如何做？

这是我的html:

    <mat-expansion-panel class="expansion-panel-class">
<mat-expansion-panel-header>
....
</mat-expansion-panel-header>
<mat-list>
<!-- my elements -->
</mat-list>
</mat-expansion-panel>

和我的css:

.expansion-panel-class{
    /*Expansion panel is collapsed*/
}

.expansion-panel-class :hover{
    /*Expansion panel is expanded*/
}

提前致谢!

如何覆盖由生成的第一个div上的CSS <mat-form-field>？

背景

我有一大堆领域的一个<mat-card>和最后一个领域是在卡的底部造成太大填充。

<mat-form-field id="this-feels-hacky-and-wrong"...>
    <!-- I want to remove the padding-bottom from this element -->
    <div class="mat-input-wrapper mat-form-field-wrapper">
      ...
    </div>
</mat-form-field>

在我stlye.css我放

#this-feels-hacky-and-wrong div{
  padding-bottom: 0;
}

可以，但是必须有更好/正确的方法来做到这一点，不是吗？

我希望有一个component.scss文件中的解决方案。

这是我的用户表格：

我有一个问题，输入字段的颜色是白色，背景是相同的白色。我在任何地方都找不到如何更改输入字段的颜色。

彩色文本的属性css是什么？

这是我的模板：

<div class="example-container" style="color:red">
    <mat-form-field>
      <input matInput placeholder="Input">
    </mat-form-field>

    <mat-form-field>
      <textarea matInput placeholder="Textarea"></textarea>
    </mat-form-field>

    <mat-form-field>
      <mat-select placeholder="Select">
        <mat-option value="option">Option</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  new contact

有人可以告诉我，当您单击角度材料复选框时，如何更改圆形的颜色。下图所示（粉红色圆圈）

这是官方网页上的链接：https : //material.angular.io/components/checkbox/overview

谢谢您的帮助