Angular 如何以声明方式配置mdl对话框

我正在尝试对我的组件使用mdl对话框，如下所示：

但编译器说：

无法绑定到“mdl dialog config”，因为它不是“mdl dialog”的已知属性

如果“mdl dialog”是一个角度组件，并且具有“mdl dialog config”输入，则验证它是否是此模块的一部分

如果“mdl dialog”是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息

我的全部内容是：

  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);
     }
  }

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

编辑 这里是我的应用程序模块：

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 { }

---

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

能否向我们展示您的应用程序模块定义？您是否在应用程序模块中声明组件？下面是一个带有声明性对话框的最小punkr：。我已经看到了您的plunkr，并发现了如何解决导航问题（我不认为这是由mdl对话框组件引起的问题）。我用app.module编辑了答案。现在我尝试剥离我的应用程序，检查是否有东西干扰mdl对话框。

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

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

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 { }