标签: angular-material

我目前正在使用，Angular Material cdkoverlay并且想要在我点击屏幕上除叠加层之外的其他任何位置时将其关闭。我已经前进并订阅了，backdropClick()但无法解决。

launchOverlay() {
        let strategy = this.overlay.position()
        .connectedTo(
            this._overlayOrigin,
            {originX: 'end', originY: 'top'},
            {overlayX: 'end', overlayY: 'top'} );
        let config = new OverlayConfig({positionStrategy: strategy, width: '280px', scrollStrategy: this.overlay.scrollStrategies.reposition()});
        this._overlayRef = this.overlay.create(config);
        this._overlayRef.attach(new TemplatePortal(this.filterTemplate, this.viewContainerRef));
        this._overlayRef.backdropClick().subscribe(() => this.close()}, () => console.log("ERROR"), () => console.log("COMPLETE"));
}

 close(){
    this._overlayRef.dispose();
}

<ng-template cdkPortal #columnFilter>
    <mat-card>
        HELLO WORLD
    </mat-card>
</ng-template>

创建和启动叠加层的所有操作都可以正常运行，只是响应外部点击。

如果我添加hasBackdrop: true到OverlayConfig它，那么它将创建一个深灰色的背景，并且在外部单击会起作用，但是我不希望使用可见的背景，例如selete组件。

我正在使用Angular 6和Angular Material.当我单击编辑按钮时,将在选择中初始化辅助,SSC和男性值.但我无法做到这一点.我只能在单击"编辑"按钮后在下拉列表中显示"男性"值.所以我想在下拉列表中显示所有值,并为动态选择传递对象.谢谢.

我的代码链接在这里:stackblitz链接

我正在寻找一种检查我的菜单mat-menu是否打开的方法，因此我可以根据菜单的状态向button打开它的类中添加一个类[ngClass]。

<button mat-stroked-button mdbWavesEffect [matMenuTriggerFor]="menu">Actions</button>
    <mat-menu #menu="matMenu" [overlapTrigger]="false" panelClass="custom">
        <a routerLink="/attendence/detail" mat-menu-item>View Attendance</a>
        <a routerLink="/adherence/detail" mat-menu-item>View Adherece</a>
        <button mat-menu-item>Edit Agent</button>
        <button mat-menu-item>Upload photo</button>
        <button mat-menu-item>Deactivate Agent</button>
    </mat-menu>

我正在尝试在Angular Materials mat-select中使用optionSelectionChanges的observable属性。它提供了所有子选项更改事件的组合流。

当用户更改选项以更新验证器时，我想获取先前的值。我不知道如何处理从模板到组件的可观察流，或者该属性是否最好？

的HTML：

<mat-form-field>
  <mat-select (optionSelectionChanges)='getStream' formControlName='value1'>
    <mat-option value='1'>Option1</mat-option>
    <mat-option value='2'>Option2</mat-option>   
  </mat-select>
</mat-form-field>

零件：

import { Component, OnInit } from '@angular/core';
import {FormGroup, FormControl, Validators, FormBuilder} from '@angular/forms';
import { MatOptionSelectionChange } from '@angular/material';

@Component({
  selector: 'test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})

export class TestComponent implements OnInit {  
  form: FormGroup;
  getStream: Observable<MatOptionSelectionChange>;

  constructor(private _fb: FormBuilder) { }

  ngOnInit() {
    this.getStream.subscribe(res => {console.log(res)})

    this.form = this._fb.group({
      'value1': [null, Validators.compose([])]
    });
  }
}

谢谢

我正在使用mat对话框,该对话框在ap-fullcalendar上单击事件时执行.我正在使用Angular6.

单击某个事件时,会出现以下对话框,没有任何信息.

一旦我按下"购买"按钮,它就会转到实际的对话框.

注意:按钮似乎没有按预期工作,但是,我认为这取决于我原来的问题.此外,当我双击我的事件时,我会在第一个屏幕截图所示的对话框打开时获得不同的行为.当我按或取消时,它会关闭.

任何帮助表示赞赏!

我的主要组成部分TS:

import { Component, OnInit, ViewChild, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { CalendarComponent } from 'ap-angular2-fullcalendar/src/calendar/calendar';
import { CalendarService } from '../_services/calendar.service';
import { DialogComponentComponent } from './dialog-component/dialog-component.component';

export interface DialogData {
  animal: string;
  name: string;
}

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

  calendarOptions: any;
  displayEvent: any;
  @ViewChild(CalendarComponent) ucCalendar: CalendarComponent;
  animal: string;
  name: string;
  subjectFilter: string;

  constructor(protected calendarService: CalendarService, private dialog: MatDialog) …

我得到了这个 带有选择列表的stackblitz示例，如下图所示。

在选择列表中，列表选择正常，但是如何删除该复选框？

我真的很想通过垫选择基本功能，但是要有复选框。如果我打开[multiple]，则得到复选框，但同时也得到了多选功能，我需要单选和复选框。

（我参考此链接以了解https://github.com/angular/angular-cli/issues/2662），我在angular.json中添加add css并导入库instyle.css（它给出了类似./src/styles的错误.css（./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./src/styles.css）），在angular的本地项目中安装材质图标库的正确方法是什么？

npm install material-design-icons-iconfont --save

angular.json

"styles": [
  "src/styles.css",
  "../node_modules/material-design-icons/iconfont/material-icons.css",
],

style.css

@import "~material-design-icons-iconfont/dist/material-design-icons";

index.html

<link href="../material-design-icons-iconfont/dist/fonts/" rel="stylesheet">

当子菜单打开时，角度材质菜单（https://material.angular.io/components/menu/overview）与主菜单重叠。有什么方法可以从菜单按钮的底部启动子菜单？

我尝试在全局css中设置css，但是它也适用于各个子菜单。

.cdk-overlay-pane {margin-top：40px;}这不起作用。

请让我知道是否有人可以解决。

谢谢。

我正在Angular 6中使用Angular材质进行项目，并且在一个特定的路线中，我有一个垫式isLinear=true踏步机，该垫具有6步，配置为，因此用户无法继续下一步，直到完成实际步骤，依此类推。

但是当涉及到第5步时，是否有一个执行某些操作的按钮，并且在用户单击该按钮之后，我想防止用户退后并更改先前完成的数据。

我已经禁用了后退按钮，但是用户可以单击步进器顶部显示的步骤标题返回到先前完成的任何步骤。