ここに示したよう宣言的な方法私は私のコンポーネントでMDL-ダイアログを使用しようとしている

Question

をしてMDL-ダイアログを設定する方法：http://mseemann.io/angular2-mdl/dialogs-declarative

しかし、コンパイラは言う：

ができませんこれは 'mdl-dialog'の既知のプロパティではないため、 'mdl-dialog-config'にバインドします。

1. 'mdl-dialog'がAngularコンポーネントで、 'mdl-dialog-config'入力がある場合は、このモジュールの一部であることを確認してください。
2. 「mdl-dialog」がWebコンポーネントの場合は、このコンポーネントの「@ NgModule.schemas」に「CUSTOM_ELEMENTS_SCHEMA」を追加して、このメッセージを表示しないようにします。

   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> 

をアプリのbody要素内のテンプレート出口を。

私が設定削除する場合：

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

をダイアログが作業を開始します。

マイケルの例here後、私は私のコンポーネントでこれらのクラスをインポートしてみました：

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

が、エラーが解消されません。私は何が欠けていますか？

ここでEDIT 私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

質問はバージョン2.4.0にangular2-MDLモジュールをアップグレード解決しました。