chore(datepicker) fixed issue of datepicker portal

src/lib/core/portal/dom-portal-host.ts

@@ -29,17 +29,21 @@ export class DomPortalHost extends BasePortalHost {
    */
   attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T> {
     let componentFactory = this._componentFactoryResolver.resolveComponentFactory(portal.component);
-    let componentRef = componentFactory.create(portal.injector || this._defaultInjector);
-    componentRef.hostView.detectChanges();
+    let componentRef: ComponentRef<T>;
 
     // If the portal specifies a ViewContainerRef, we will use that as the attachment point
     // for the component (in terms of Angular's component tree, not rendering).
     // When the ViewContainerRef is missing, we use the factory to create the component directly
     // and then manually attach the view to the application.
     if (portal.viewContainerRef) {
-      portal.viewContainerRef.insert(componentRef.hostView);
+      componentRef = portal.viewContainerRef.createComponent(
+          componentFactory,
+          portal.viewContainerRef.length,
+          portal.injector || portal.viewContainerRef.parentInjector);
+
       this.setDisposeFn(() => componentRef.destroy());
     } else {
+      componentRef = componentFactory.create(portal.injector || this._defaultInjector);
       this._appRef.attachView(componentRef.hostView);
       this.setDisposeFn(() => {
         this._appRef.detachView(componentRef.hostView);

src/lib/datepicker/datepicker.ts

@@ -25,10 +25,8 @@ import {
   ValidatorFn,
   Validators,
 } from '@angular/forms';
-import {
-  coerceBooleanProperty,
-  Overlay
-} from '../core';
+import { coerceBooleanProperty } from '../core';
+import { Overlay } from '../core/overlay/overlay';
 import { OverlayRef } from '../core/overlay/overlay-ref';
 import { ComponentPortal } from '../core/portal/portal';
 import { OverlayState } from '../core/overlay/overlay-state';
@@ -65,7 +63,7 @@ let datepickerUid = 0;
   styleUrls: ['datepicker-content.css'],
   host: {
     'class': 'md2-datepicker-content',
-    '[class.md2-datepicker-content-touch]': 'datepicker.touchUi',
+    '[class.md2-datepicker-content-touch]': 'datepicker?.touchUi',
     '(keydown)': '_handleKeydown($event)',
   },
   encapsulation: ViewEncapsulation.None,
@@ -289,7 +287,8 @@ export class Md2Datepicker implements OnDestroy, ControlValueAccessor {
     private _overlay: Overlay,
     private _ngZone: NgZone,
     private _viewContainerRef: ViewContainerRef,
-    private _locale: DateLocale, private _util: DateUtil,
+    private _locale: DateLocale,
+    private _util: DateUtil,
     @Optional() private _dir: Dir) {
   }
 
@@ -541,7 +540,7 @@ export class Md2Datepicker implements OnDestroy, ControlValueAccessor {
       componentRef.instance.datepicker = this;
     }
 
-    this._dialogRef.backdropClick().first().subscribe(() => this.close());
+    this._dialogRef.backdropClick().subscribe(() => this.close());
   }
 
   /** Open the calendar as a popup. */
@@ -559,7 +558,7 @@ export class Md2Datepicker implements OnDestroy, ControlValueAccessor {
       this._ngZone.onStable.first().subscribe(() => this._popupRef.updatePosition());
     }
 
-    this._popupRef.backdropClick().first().subscribe(() => this.close());
+    this._popupRef.backdropClick().subscribe(() => this.close());
   }
 
   /** Create the dialog. */
@@ -579,11 +578,7 @@ export class Md2Datepicker implements OnDestroy, ControlValueAccessor {
     const overlayState = new OverlayState();
     overlayState.positionStrategy = this._createPopupPositionStrategy();
     overlayState.hasBackdrop = true;
-    if (this.touchUi) {
-      overlayState.backdropClass = 'cdk-overlay-dark-backdrop';
-    } else {
-      overlayState.backdropClass = 'cdk-overlay-transparent-backdrop';
-    }
+    overlayState.backdropClass = 'cdk-overlay-transparent-backdrop';
     overlayState.direction = this._dir ? this._dir.value : 'ltr';
     overlayState.scrollStrategy = this._overlay.scrollStrategies.reposition();