如何在不同配置的两页中使用角2材料设计数据报警器？

Question

我有两个数据库--一个在主页上，另一个在学生页面上。在我的学生页面中，我设置了一个组件来获得类似于Fri 28 Jul 2017的日期，因为默认情况下是14/07/2017，但这正是我在主页上需要它的方式。

那么，让我们为学生创建一个新的模块，并添加设置，只显示学生页的配置，并在home中导入MdDatepickerModule，这将解决问题，但是

STUDENT.MODULE

import { NgModule } from '@angular/core';
import { MdNativeDateModule,
         DateAdapter,
         MD_DATE_FORMATS } from '@angular/material';


import { MY_NATIVE_DATE_FORMATS } from '../../assets/date-format/mydataformat';
import { MyDateAdapter } from '../../assets/date-format/mydateadapter';
/**
 * This class represents the whip holder.
 */

@NgModule({
  imports: [MdNativeDateModule],

  providers: [
    {provide: DateAdapter, useClass: MyDateAdapter},
    {provide: MD_DATE_FORMATS, useValue: MY_NATIVE_DATE_FORMATS}
  ]
})

export class StudentModule {}

HOME.MODULE

import { NgModule } from '@angular/core';
import { HomeRoutingModule } from './home-routing.module';


import { BrowserModule } from '@angular/platform-browser';  
import { CommonModule } from '@angular/common';


//material
import {

  MdDatepickerModule
  // DateAdapter,
  // MD_DATE_FORMATS
      } from '@angular/material';

//customize datapicker
// import { MY_NATIVE_DATE_FORMATS } from '../../assets/date-format/mydataformat';
// import { MyDateAdapter } from '../../assets/date-format/mydateadapter';



import { StudentModule } from './student/student.module';


@NgModule({
  imports: [MdDatepickerModule]

})
export class HomeModule { }

结构

├── src
│   └── client
│       ├── app
│       │   ├── app.component.e2e-spec.ts
│       │   ├── app.component.html
│       │   ├── app.component.spec.ts
│       │   ├── app.component.ts
│       │   ├── app.module.ts
│       │   ├── app.routes.ts
│       │   ├── home <-- datapicker
│       │   │   ├── student <--- datapicker 
│       │   │   |   ├── student.component.scss
│       │   │   │   ├── student.component.html
│       │   │   |   ├── student.component.ts
│       │   │   |   ├── student.module.ts
│       │   │   ├── home-routing.component.ts
│       │   │   ├── home.component.html
│       │   │   ├── home.component.scss
│       │   │   ├── home.component.ts 
│       │   │   ├── home.module.ts 
│       │   ├── assets 
│       │   │   ├── date-format 
│       │   │   │   ├── mydataformat.ts 
│       │   │   │   ├── mydataadapter.ts 

如何配置以便在主页中显示组件的默认数据，但在学生页面中保留设置？

我调用的datapicker组件如下

student.component.html

 <button [mdDatepickerToggle]="Date"></button>
 <input [mdDatepicker]="Date" />
 <md-datepicker #Date></md-datepicker>

home.component.html

 <button [mdDatepickerToggle]="DateHome"></button>
 <input [mdDatepicker]="DateHome" />
 <md-datepicker #DateHome></md-datepicker>

Answer 1

您是如何定义MY_NATIVE_DATE_FORMATS的？我找不到任何文件。

Answer 2

我用我的mydataformat.ts中的一个条件来解决它

import { MdDateFormats } from '@angular/material';
import { Location } from '@angular/common';

let inputs = ( window.location.pathname === '/' ? 'input-home' :'input' );

    export const MY_NATIVE_DATE_FORMATS: MdDateFormats = {

      parse: {
         dateInput: {month: 'short', year: 'numeric', day: 'numeric'}
      },

      display: {
        dateInput: inputs,
        monthYearLabel: {year: 'numeric', month: 'long'},
        dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
        monthYearA11yLabel: {year: 'numeric', month: 'long'}
      }

    };

还有我的mydateadapter.ts

import { NativeDateAdapter }  from '@angular/material';

export class MyDateAdapter extends NativeDateAdapter {
   format(date: Date, displayFormat: Object): string {

      let day = date.getDate();
      let month = date.getMonth();
      let year = date.getFullYear();

      if (displayFormat == "input") {


          let pickupData = date.toDateString();
          let pickupDataArray = pickupData.split(" ");
          let yearPicked = pickupDataArray[3]; 

          const without = pickupData.substring(0, pickupData.length-4);

          return without + '     '+yearPicked ;

       } else if (displayFormat == "input-home") {
          return this._to2digit(day) + '/' + this._to2digit(month) +'/'+ year;
       }

       else{
        return date.toDateString();
      }
   }

   private _to2digit(n: number) {
       return ('00' + n).slice(-2);
   }

}