标签: angular-material

我正在研究带有角度材料设计的 MEAN堆栈.在chrome和firefox上进行测试后,包括flex和offset等在内的所有功能都非常完美.但是在互联网资源管理器中,没有任何东西像它应该的那样工作.

我的问题是,如何使角度材料与IE 10和IE 11兼容？

TL; DR:我需要一种覆盖默认选项的方法,使用提供程序(如任何其他角度模块 - 随机示例)提供我的Angular Material(特别是在Material Dialog上).

我一直在寻找一种方法来自定义默认选项Angular Material Modal,但没有任何可用的结果.

就像我在其他插件/模块上使用的那样,这种方式可以通过使用provider.看看材料的核心(1.0.8)我试图使用这样的setDefaults方法设置选项(假设我只想暂时禁用背景):

app.config(['$mdDialogProvider', function($mdDialogProvider){
    console.log($mdDialogProvider); 
    // ^ $get/addMethod/addPreset/setDefaults

    var defaults = {
        options: function(){
            return {
                hasBackdrop: false
            }
        }
    }
    $mdDialogProvider.setDefaults(defaults);
}]);

现在当我检查onComplete回调选项时:

因此,您可以看到该hasBackdrop选项已更新,但模式不再起作用,所以我想我错过了一些东西.

你知道如何以适当的方式扩展角度默认值吗？

谢谢

更新:没有.setDefaults活动的选项对象(de initial state)

注意:我已从他们的核心复制transformTemplate并添加到我的默认对象中,但结果是相同的.我可以看到DOM更新,控制台没有错误,但模态不可见.

我试图让Angular Material Design菜单工作,但我似乎无法使用应该通过ng-click注入的$ mdMenu.

我的HTML标记:

<div layout="column" layout-fill ng-controller="AuthControl">
    <md-toolbar ng-controller="navigationControl">
        <div ng-controller="menu as ctrl">
          <md-menu>
             <md-button class="md-icon-button" ng-click="ctrl.open($mdMenu, $event)">
               <md-icon>menu</md-icon>
             </md-button>
             <md-menu-content width="4">
                <md-menu-item>
                   <md-button>
                       <md-icon>account_circle</md-icon>
                   </md-button>
                </md-menu-item>
             </md-menu-content>
         </md-menu>
      </div>
   </md-toolbar>
</div>

角度控制器:

controllers.controller('menu', function menuControl($mdDialog) {
   var originatorEv;

   this.open = function($mdMenu, ev) {
     originatorEv = ev;
     $mdMenu.open(ev);
   };
});

控制器被正确注入,但是当我运行时,我得到错误

TypeError: Cannot read property 'open' of undefined

有人知道如何解决这个问题吗？谢谢

我切换MdTabGroup到md-tab-nav-bar/ md-tab-link指令,以便能够将路由分配给各个标签页.不幸的是,我在这个过程中丢失了滑入式动画(似乎没有指令的动画),所以我试图模仿行为MdTab到目前为止没有成功.

这是使用tab指令的模板:

<div class="ink-results" *ngIf="model && (model | async).length > 0" >
    <nav md-tab-nav-bar>
        <a md-tab-link
            *ngFor="let browser of model | async;trackBy: trackByBrowserId"
            [routerLink]="['/results', browser.id]"
            routerLinkActive #rla="routerLinkActive"
            [active]="rla.isActive">
            {{browser.name}}
        </a>
    </nav>
    <router-outlet></router-outlet>
</div>

这是路由到的模板:

<div class="ink-explorer">
    <div class="ink-items">
        <div class="ink-item"
            [@flyInOut]="state"
            *ngFor="let result of results | async;trackBy: trackById"
            routerLinkActive="ink-active-item">
            <a [routerLink]="[result.id]">
                <md-icon svgIcon="flask" 
                    [ngClass]="{ 'ink-failed': (result.status === 2), 'ink-pending': result.status === 4, 'ink-success': result.status === 6 }">
                </md-icon>
                <div class="ink-item-title">{{result.description}}</div>
            </a>
        </div> …

我将matSort导入matTable时遇到问题.

我正在为您提供我的代码:

dashboard.component.ts

import {Component, ViewChild} from '@angular/core';
import {UserService} from "../user.service";
import {DohvatMantisaService} from "../dohvat-mantisa.service";
import {Mantisi} from "../Mantisi";
import {Observable} from "rxjs/Observable";
import {DataSource} from "@angular/cdk/collections";
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import {MatSort} from '@angular/material';
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent{
  displayedColumns = ['projekt', 'manits', 'kategorija','ozbiljnost','datum_prijave','postavio','odjel','postavio','naziv','status','planirana_isporuka'];
  constructor(private user:UserService, private dohvatMantisa:DohvatMantisaService) {
  }
  dataSource: TableDataSource | null;
  mantisi: Mantisi[];
  name = this.user.getUsername();
  @ViewChild(MatSort) sort: MatSort;
  ngOnInit() {
    this.dataSource = new TableDataSource(this.dohvatMantisa,this.sort);
  }
} …

我们正在为我们的应用使用Angular Material表:

https://material.angular.io/components/table/overview

<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

你能否展示如何在鼠标悬停上突出显示一行？

我创建了一个新项目,我正在尝试添加angular-material.

我material.module.ts在我的app文件夹中创建:

import { NgModule } from '@angular/core';

import {
    MatButtonModule,
    MatMenuModule,
    MatIconModule,
    MatCardModule,
    MatSidenavModule,
    MatFormFieldModule,
    MatInputModule,
    MatTooltipModule,
    MatToolbarModule
} from '@angular/material';

@NgModule({
    imports: [
        MatButtonModule,
        MatMenuModule,
        MatIconModule,
        MatCardModule,
        MatSidenavModule,
        MatFormFieldModule,
        MatInputModule,
        MatTooltipModule,
        MatToolbarModule,
    ],
    exports: [
        MatButtonModule,
        MatMenuModule,
        MatIconModule,
        MatCardModule,
        MatSidenavModule,
        MatFormFieldModule,
        MatInputModule,
        MatTooltipModule,
        MatToolbarModule
    ]
})
export class MaterialModule { }

我已将其导入我的一个组件中:

import { MaterialModule } from '../material.module';

此外,我已经设置了角度材料 index.html

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

在我的 style.css

@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';

我知道这是有效的,因为我已经展示了material-icon一个测试:

<i class="material-icons">face</i> …

将数据注入到材质对话框中效果很好,但是如果它们在父/开启组件中发生更改(例如来自(WAMP)订阅),如何自动更新这些数据？

[更新]
我创建了一个最小版本来试验行为:https://stackblitz.com/edit/angular-njh44v？robid = 1&file = src/app/app.component.ts
打开右下角的控制台然后单击带有数字的灰色框.您会看到对话框获取当前数字,之后不再更新.
[/更新]

[更新2]
根据Jusmpty的第二个想法,这个接缝一见钟面(即使对话框在数据到达后第一次显示/更新):https://stackblitz.com/edit/angular-thd34f？eed = 1&file = src/app/app.component.ts
[/ Update]

具体案例如下:

• 有一个区域组件订阅WAMP服务并获取包含部分的所有数据.这将使用*ngFor 绘制所有部件. 文件area.component.ts
  
• 每个部分都有一个显示一些数据的组件.如果订阅中的数据发生更改,则视图会针对每个/所有部分正确并自动更新.
  文件part.component.ts和part.component.html
• 在每个部分上,单击将打开一个对话框,其中显示更多数据.
  文件part-details-dialog.component.ts和part-details-dialog.component.html

在最后一个操作/步骤发生当前数据显示(注入)的问题,但如果订阅数据中的某些内容发生更改,则不再更新.

area.component.ts

@Component({
  selector: 'app-area',
  template: '<app-part *ngFor="let part of plan" [partData]="part"></app-part>'
})
export class AreaComponent {

  plan = [];

  planasync$ = this.wampService
    .topic('sendplan') …

我有<mat select>多种选择.但是我需要知道选择何时发生变化,确切的变化是什么.

例如,如果我有一个列表:

<mat-select (selectionChange)="change($event)" multiple placeholder="Select">
  <mat-option value="1">one</mat-option>
  <mat-option value="2">two</mat-option>
  <mat-option value="3">three</mat-option>
  <mat-option value="4">four</mat-option>
</mat-select>

何时multiple触发它返回新选择的内容.但我需要知道正在改变的新价值是什么.我该如何访问？

例如,如果选择1和3然后用户选择4,我需要知道他们选择了4但我没有看到在事件信息中访问它的方法.

https://stackblitz.com/edit/angular-1e9gsd?file=app/select-overview-example.ts

我尝试将selectionChange部件放在上面,one但它似乎不是受支持的事件触发器.

我正在尝试使用此页面上显示的Angular架构. 当我尝试在项目根目录的终端中使用以下命令时,生成@ angular/material:material-nav --name name-of-new-nav,我得到以下错误为红色,

收集"@ angular/material"无法解析.错误:无法解析集合"@ angular/material".在NodeModulesEngineHost的NodeModulesEngineHost._resolveCollectionPath(/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular-devkit/schematics/tools/node-module-engine-host.js:88:15). SchematicEngine._createCollectionDescription中的createCollectionDescription(/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular-devkit/schematics/tools/file-system-engine-host-base.js:106:27) (/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular-devkit/schematics/src/engine/engine.js:78:40)在SchematicEngine.createCollection(/ Users/jeremypeters/MEGA) /development/learning/angular/material-learn/node_modules/@angular-devkit/schematics/src/engine/engine.js:71:43)在Object.getCollection(/ Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular/cli/utilities/schematics.js:28:31)GenerateCommand.getOptions(/ Users/jeremypeters/MEGA/development/learning/angul)在GenerateCommand的ar /material-learn/node_modules/@angular/cli/models/schematic-command.js:193:41).(/Users/jeremypeters/MEGA/development/learning/angular/material-learn/node_modules/@angular/cli/commands/generate.js:38:53)位于/ Users/jeremypeters/MEGA/development的Generator.next() /learning/angular/material-learn/node_modules/@angular/cli/commands/generate.js:7:71在新的Promise()

我如何让它工作？

信息:Angular CLI:6.0.8