标签: angular-material2

我有:

<md-tab-group color="primary">
  <md-tab label="???????">
    <h1>Some tab content</h1>
  </md-tab>
  <md-tab label="????????">
    <h1>Some more tab content</h1>
    <p>...</p>
  </md-tab>
</md-tab-group>

我需要在单击特定选项卡时捕获事件并在我的组件中调用此函数:

onLinkClick() {
  this.router.navigate(['contacts']); 
}

问题陈述

我正在学习Angular 4,我偶然发现了一个代码,@Inject它正在被用于a中constructor,我无法弄清楚为什么......

代码和来源

我正在使用Angular 4 Material

代码来源: https ://material.angular.io/components/dialog/overview

在代码中,它们正在注入 MAT_DIALOG_DATA

constructor(public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
             @Inject(MAT_DIALOG_DATA) public data: any
           ) { }

任何人都可以详细说明它的意思,我们应该在何时/何地这样做？

我有angular2应用程序,它使用@ angular2-material 2.0.0-alpha.8-2版本.一切正常.现在我决定将材料版本升级到最新版本,即2.0.0-alpha.9-3.我按照GETTING_STARTED中提到的步骤进行操作.之前我已经导入了以下单个模块:

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,

    MdIconModule,
    MdButtonModule,
    MdCardModule,
    MdCheckboxModule,

    ....
    ....  

但是2.0.0-alpha.9-3版本的更改日志说:

"角度材料已从@ angular2-material/...包更改为@ angular/material下的单个包.随着此更改,还有一个新的NgModule,MaterialModule,其中包含所有组件."

所以我删除了明确导入的材料模块并将其更改为:

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,

    MaterialModule.forRoot(),
    ....
    ....

在此更改后,我收到以下错误

'md-icon'不是已知元素:

1. 如果'md-icon'是Angular组件,则验证它是否是此模块的一部分.
2. 如果'md-icon'是Web组件,则将"CUSTOM_ELEMENTS_SCHEMA"添加到此组件的'@NgModule.schemas'以禁止显示此消息.

我是否需要显式导入单个模块,或者如更改日志中所述,MaterialModule包含所有组件,我不应该显式导入单个模块？如果我不应该导入单个模块那么可能是错误的来源？

是否可以在步进器内重置(或只是跳到第一步)？文档中没有记录,但是可以这样做吗？在文档中声明步进器是建立在"CDK Stepper"(链接？)上的,但我找不到任何能够引导我实现目标的例子.

我想从材料CDK 使用新的Portal在表单的多个部分中注入动态内容.

我有一个复杂的表单结构,目标是有一个表单,指定子组件可以(或不)注入模板的多个位置.

也许CDK门户网站不是最好的解决方案？

我试了一下,但我确定这不是做的事情:https: //stackblitz.com/edit/angular-yuz1kg

我也尝试过,new ComponentPortal(MyPortalComponent)但我们如何设置输入呢？通常是这样的componentRef.component.instance.myInput

我必须从快餐栏组件更改背景.我正在使用它来警告或通知用户有关用户所做的某些错误或已完成的操作.

项目的材料版本."@ angular/material":"^ 5.0.0-rc.1",

文档https://material.angular.io/components/snack-bar/api说一个改变类的api.

panelClass:string | string []要添加到小吃店容器的额外CSS类.

这是我在css文件中添加的内容.

.mycsssnackbartest {
  background-color: blue;
}

这是打开小吃店的代码

this.snackBar.open('Informing the user about sth', 'User Message' , {
    panelClass: ['mycsssnackbartest ']
} );

我究竟做错了什么？

我进口的一个,这些项目中,想知道是否有从的角度和材料,包括时间任何官方最新的组件以及日历.我在材料文档中看到了大量的时间选择,并研究了很多第三方,但它们看起来非常复杂.任何帮助都会很棒!

我有以下select组件,它来自rest api的数据.如何在md-select上设置默认选择值？

  <md-select
                placeholder= "Warehouse"
                style="width: 100%"
                [(ngModel)]='selectedProductWarehouse.warehouse'
                name="Warehouse"
                required
                #Warehouse="ngModel">
          <md-option *ngFor="let warehouse of warehouses" [value]="warehouse">{{warehouse.description}}</md-option>
        </md-select>

经过几周的谷歌搜索和迄今为止只有一个Stackoverflown问题,我终于设法使用Material Table Component构建了我的Angular CRUD应用程序.它显示来自后端(JSON)的数据和CRUD操作我使用的对话框如图所示(这是编辑,对克罗地亚人抱歉).对话可能不是最好的方法,内联编辑可能会更好.但是,为了添加新项目,你需要像对话这样的东西.

我最后一件事就是如何相应地更新表中的字段.因此,当您在对话框中按"保存"时,数据会在后端(在MySQL表中)更新,但不会在前端更新.目前我有一个丑陋的解决方法,每次当你做更新时,它也刷新整个表.

无论如何这里的代码:

表组件:

export class BazaComponent implements OnInit {
  ....
  constructor(public httpClient: HttpClient, public dialog: MatDialog) {
  }

  ngOnInit() {
    this.loadData();
  }

  // TODO: Simplfy this...
  addNew(ident: number, naziv: string, mt: number, kutija: number,
         komada: number, jm: string, orginal: number, lokacija: number, napomena: string) {
    console.log('add new clicked');
    const dialogRef = this.dialog.open(AddDialogComponent, {
      data: {ident: ident, naziv: naziv, mt: mt, kutija: kutija,
        komada: komada, jm: jm, orginal: orginal, lokacija: lokacija, napomena: napomena …

所以我一直在尝试在我的Web应用程序开发中采用Materials Accordion.

然而,随着内容的增长,使标题扩大的麻烦有些麻烦.

我的标题预计将有相当多的行来提供摘要,而不仅仅是1个班轮.

如果我硬编码材质标题高度,它会导致动画干扰.

下面是一个示例代码

<mat-accordion [displayMode]="displayMode" [multi]="multi" class="mat-expansion-demo-width">
                <mat-expansion-panel #panel1 [hideToggle]="hideToggle">
                    <mat-expansion-panel-header>Section 1</mat-expansion-panel-header>
                    <p>This is the content text that makes sense here.</p>
                </mat-expansion-panel>
            </mat-accordion>

::ng-deep .mat-expansion-panel-header
{
    height: 190px !important;
}

如果我执行上述操作,则会设置高度,但展开和折叠的动画会很奇怪.

我该怎么办呢？