如何以声明方式配置 mdl-dialog

Question

我正在尝试将 mdl-dialog 与我的组件一起使用，如下所示：http://mseemann.io/angular2-mdl/dialogs-declarative

但是编译器说：

Can't bind to 'mdl-dialog-config' since it isn't a known property of 'mdl-dialog'.

If 'mdl-dialog' is an Angular component and it has 'mdl-dialog-config' input, then verify that it is part of this module.

If 'mdl-dialog' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

我的完整组件是：

  import { Component, Input, OnInit, ViewContainerRef } from '@angular/core';
  import { DomSanitizer } from '@angular/platform-browser';
  import { Router, ActivatedRoute, Params } from '@angular/router';

  import { OrderItem } from '../models/OrderItem';
  import { SizerunBox } from '../models/SizerunBox';
  import { Customer } from '../models/Customer';

  import { CollectionDataService } from '../services/CollectionData.service';

  import { MdlDialogOutletService, MdlDialogComponent, MdlDialogReference } from 'angular2-mdl';

  export interface OrderItemWithSizerunBoxes extends OrderItem {
     sizerunboxes: SizerunBox[];
  }

  @Component({
    selector: 'ordercart',
    templateUrl: 'app/ordercart/ordercart.component.html',
    styleUrls: ['app/ordercart/ordercart.component.css']
  })
  export class OrderCart implements OnInit {
     ordercart: OrderItemWithSizerunBoxes[];
     ordercartsizerunboxes: SizerunBox[];
     from: string = "";
     rawOrderDate: Date = new Date();
     orderDate: string = "";
     Customers: Customer[] = [];

     constructor(
           private route: ActivatedRoute,
           private router: Router,
           private sanitizer: DomSanitizer,
           private collectionDataService: CollectionDataService,
           private dilalogOuletService: MdlDialogOutletService,
           private viewContainerRef: ViewContainerRef
        ) {

        this.dilalogOuletService.setDefaultViewContainerRef(this.viewContainerRef);
     }

     ngOnInit() {
        this.orderDate = this.rawOrderDate.toISOString().slice(0,10);

        this.route.params.forEach((params: Params) => {
           this.from = params['from'];
        });

        this.ordercart = <OrderItemWithSizerunBoxes[]>this.collectionDataService.getOrderCart();
        this.ordercartsizerunboxes = this.collectionDataService.getOrderCartSizerrunBoxes();
        this.ordercart.map(orderitem => {
              orderitem.imageSrc = this.sanitizer.bypassSecurityTrustResourceUrl("/template/images/"+orderitem.itemid+".jpg");
              orderitem.sizerunboxes = this.ordercartsizerunboxes.filter(sritem => sritem.orderitemid === orderitem.idorderitems);
           });

        this.collectionDataService.
           getCustomers()
           .then(Customers => this.Customers = Customers);
     }
  }

然后放入模板中：

<button #sendOrderButton (click)="sendOrderDialog.show()" mdl-button mdl-button-type="icon" mdl-ripple>
        <mdl-icon>send</mdl-icon>
     </button>
     <mdl-dialog #sendOrderDialog  [mdl-dialog-config]="{
           clickOutsideToClose: true,
           styles:{'width': '300px'},
           isModal:true,
           openFrom: sendOrderButton,
           enterTransitionDuration: 400,
           leaveTransitionDuration: 400}">
     // ...
     </mdl-dialog>

在应用程序的正文元素中使用模板出口。

如果我删除配置：

<button #sendOrderButton (click)="sendOrderDialog.show()" mdl-button mdl-button-type="icon" mdl-ripple>
        <mdl-icon>send</mdl-icon>
     </button>
     <mdl-dialog #sendOrderDialog>

对话框开始工作。

按照 Michael 的示例 here，我尝试在我的组件中导入这些类：

  import { MdlDialogComponent } from '../../node_modules/angular2-mdl/components/dialog/index';
  import { MdlDialogReference } from '../../node_modules/angular2-mdl/components/dialog/mdl-dialog.service';

但错误仍然存在。我错过了什么？

编辑这是我的 app.module:

import { NgModule, LOCALE_ID } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';

  import { MdlModule } from 'angular2-mdl';
  import { MdlPopoverModule } from '@angular2-mdl-ext/popover';
  import { MdlSelectModule } from '@angular2-mdl-ext/select';

  import './rxjs-extensions';

  import { AppComponent } from './app.component';
  import { MainpageComponent } from './mainpage/mainpage.component';
  import { ViewerComponent } from './viewer/viewer.component';
  import { ProductDetails } from './productdetails/productdetails.component';
  import { NewItem } from './newitem/newitem.component';
  import { OrderCart } from './ordercart/ordercart.component';
  import { Statistics } from './statistics/statistics.component';

  import { AppRoutingModule } from './app.routes';

  import { CollectionDataService } from './services/CollectionData.service';
  import { customerSearchPipe } from './pipes/customer-search.pipe';
  import { orderSearchPipe } from './pipes/order-search.pipe';

  import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
  import { InMemoryDataService } from './services/in-memory-data.service';

  import { HighlightDirective } from './highlight.directive';
  import { HammerGesturesDirective } from './hammergestures.directive';


  @NgModule({
     imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        AppRoutingModule,
        MdlModule,
        MdlPopoverModule,
        MdlSelectModule,
        HttpModule,
        InMemoryWebApiModule.forRoot(InMemoryDataService),
     ],
     declarations: [
        AppComponent,
        MainpageComponent,
        ViewerComponent,
        ProductDetails,
        NewItem,
        OrderCart,
        Statistics,
        customerSearchPipe,
        orderSearchPipe,
        HighlightDirective,
        HammerGesturesDirective,
     ],
     providers: [
        { provide: LOCALE_ID, useValue: "it-IT" },
        CollectionDataService
     ],
     bootstrap: [ AppComponent ]
  })
  export class AppModule { }

Answer 1

问题已解决，将 angular2-mdl 模块升级到版本 2.4.0。

如何以声明方式配置 mdl-dialog

How to configure a mdl-dialog in the declarative way

angular2-mdl

angular