【Angular2 OnsenUI2】ons−dialogで選択させた値をons-dialog元に送信したい

こんにちは。Angular2とOnsenUI2を使って開発をしているものです。

ons-dialogを使って時間の選択をさせたいと思っています。
component内にあるformのデータを使ってons-dialogの呼び出し元に値を渡したいのですが、ベストプラクティスがわかっていません。

また、現在Injectionを使って受け渡ししようと思っているのですが、このようなエラーが出ています。

Uncaught Error: Invalid providers for "MyDialogComponent" - only instances of Provider and Type are allowed, got: [?undefined?]

コードがこちらになります。

@Component({
  providers: [UsersComponent],
  template: `
    <ons-dialog animation="default" cancelable #dialog>
      <div class="dialog-mask"></div>
      <div class="dialog">
        <div class="dialog-container" style="height: 330px;">
          <ons-toolbar>
            <div class="center">施術時間の変更</div>
          </ons-toolbar>
          <div class="content">
            <form id="timeForm" #timeForm="ngForm" (ngSubmit)="sendRequestTime(timeForm.value)">
              <ons-list>
                <ons-list-header></ons-list-header>
                <ons-list-header></ons-list-header>
                <ons-list-header>開始時間</ons-list-header>
                <ons-list-item tappable>
                  <input type="datetime-local" name="startingTime" required tappable class="dateInput" ngModel>
                </ons-list-item>
              </ons-list>
              </form>
            </div>
            <button (click)="dialog.hide()">Close</button>
            <button type="submit" form="timeForm">hoge</button>
          </div>
        </div>
    </ons-dialog>
  `
})

@Injectable()
export class MyDialogComponent {
  message = '';
  hage: any;
  constructor(params: Params, private _af: AngularFire, private _usersComponent: UsersComponent) {
    this.message = <string>params.at('message');
    this.hage = this._usersComponent.say();
    console.log(this.hage);
  }
  sendRequestTime(timeForm: any){
    console.log(timeForm);
    //ここでデータを送りたい
  }
}

Injectionされる側はシンプルです。

  say(): string {
    return "foo";
  }

そもそもDIを使うのがベストプラクティスなのかもわかっていないので、そちらも含めてどうするか教えていただけたらとっても嬉しいです。

@Component({
  selector: 'ons-page',
  template: `
    //テンプレートが入ります。
  `,
  styles: [require('./css/template.css')]
})
export class UsersComponent {
  private _dialog: any;
  private _destroyDialog: Function;
  defaultDateTime: Date;
  defaultPlusDateTime: Date;
  requestId: any;
  requests: FirebaseListObservable<any[]>;
  therapistId: any;
  therapistObject: any;
  therapistGender: string;
  hoge: any;
  requestContentArray: any[];
  jage: Array<any[]>;
  userImageUrl: string
  genderSubject: Subject<any>;
  startingTime: any;
  endTime: any;

  constructor(
    private _navigator: OnsNavigator,
    private _params: Params,
    private _af: AngularFire,
    private _us: UserService,
    private _rs: RequestService,
    private _ds: DomSanitizer,
    private _df: DialogFactory
  ){
    this.therapistId = this._params.data['therapistId'];
    console.log(this.therapistId);
    this.getTherapistInfo(this.therapistId);
    this.requests = this._af.database.list('/requests');
    this.getCurrentLocalDateTime()
  }
  say(): string {
    return "foo";
  }

  ngAfterViewInit() {
    this._df
      .createDialog(MyDialogComponent, {message: 'This is just an example.'})
      .then(({dialog, destroy}) => {
        this._dialog = dialog;
        this._destroyDialog = destroy;
      });
  }

  showDialog() {
    console.log("きたよ");
    if (this._dialog) {
      this._dialog.show();
    }
  }
  getTherapistInfo(therapistId: any) {
    this.therapistObject = this._af.database.object('/therapists/' + therapistId);
    this.therapistObject.subscribe(response => {
      this.therapistGender = response['gender'];
    });
  }
  getCurrentLocalDateTime() {
    this.defaultDateTime = new Date(Date.now());
    this.defaultDateTime.setUTCHours(this.defaultDateTime.getUTCHours() + 9);
    this.defaultPlusDateTime = new Date(Date.now());
    this.defaultPlusDateTime.setUTCHours(this.defaultPlusDateTime.getUTCHours() + 10);
    this.defaultDateTime.setSeconds(0,0);
    this.defaultPlusDateTime.setSeconds(0,0);
    this.startingTime = this.getISOStringWithoutSecsAndMillisecs1(this.defaultDateTime.toISOString().split('T'));
    this.endTime = this.getISOStringWithoutSecsAndMillisecs1(this.defaultPlusDateTime.toISOString().split('T'));
  }
  getISOStringWithoutSecsAndMillisecs1(dateAndTime) {
    const time = dateAndTime[1].split(':')
    return dateAndTime[0]+' '+time[0]+':'+time[1]
  }
  getUserProfileImageUrl(request: any) {
    let id: string = request.userId;
    return "https://firebasestorage.googleapis.com/v0/b/relappi-5ca22.appspot.com/o/images%2Fusers%2F" + id + "_users.jpg" + "?alt=media&token=f97839fa-804a-4497-81ac-44ecc4ef64cc"
  }
  pushToDetail(request: any){
    this._navigator.element.pushPage(UserDetailComponent, {
      data: {
        therapistId: this.therapistId,
        request: request,
      }
    });
  }
}

行動規範の内容に同意します

回答3件

@KoheiOkazaki

そもそもDIを使うのがベストプラクティスなのかもわかっていない

ベストプラクティスかどうかは分かりませんが DI を使うのが自然だと思います。

ts
1@Component({
2  providers: [UsersComponent],

UsersComponent を使う側が @Injectable を持っていたり UsersComponent を provide したりしているのはおかしい気がします。
UsersComponent のソースコードもいただけると嬉しいです。
（機密事項などが含まれる場合、その部分は削除してください）

投稿2016/12/16 00:49

編集2016/12/16 00:50

asial-matagawa

総合スコア164

KoheiOkazaki

2016/12/16 13:36

追加させていただきました！

KoheiOkazaki

2016/12/16 18:19

DIの使い方自体のミスは修正したのですが、以前同じエラーが出ています。実は、このclassは同じファイルにあって、それが原因かもしれません。（別ファイルからDIしてみたところ問題なく動きました）

行動規範の内容に同意します

ベストアンサー

チーム内で議論したところ、もう1つの策として

createDialog でダイアログコンポーネントに渡す引数の中に EventEmitter インスタンスを入れておく

というのが出ました。
こちらの方が簡便だと思います。よろしくお願いします。

投稿2016/12/22 09:13

asial-matagawa

総合スコア164

@KoheiOkazaki

この問題について調査しました。

ons−dialogで選択させた値をons-dialog元に送信したい

というのが今回頂いた質問なわけですが、
DialogFactory の createDialog で動的に生成したダイアログコンポーネントは 親コンポーネントを持たない ため、
階層的 DI で呼び出し元コンポーネントにアクセスすることはできません。
（階層的 DI の概念についてはこちらの記事が詳しいです: http://qiita.com/laco0416/items/61eed550d1f6070b36ab#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%83%84%E3%83%AA%E3%83%BC%E3%81%A8di ）

そのため DI を使わずに、呼び出し元コンポーネントがダイアログコンポーネントを監視するようにするのが望ましいのですが、
現在の angular2-onsenui (1.0.0-rc.3) では呼び出し元コンポーネントがダイアログコンポーネントにアクセスすることができません（アクセスできるのは「ダイアログコンポーネントが管理している ons-dialog 要素」だけです）。
そのため、現在の angular2-onsenui では、ダイアログから呼び出し元コンポーネントに値を返すという処理は（簡単には）実装できません。

一時的な代替策として、以下の方法をご提案します:

HogeService のようなサービスを作り、それを NgModule の providers に登録しておくと、
親コンポーネントを持たないダイアログコンポーネントからも DI でアクセスできます（NgModules の providers は全てのコンポーネントからアクセスできるためです）。
その HogeService にアプリ内で使用する値を格納するようにしておけば、
ダイアログからもダイアログ呼び出し元ページからも DI で HogeService インスタンスにアクセスできるので、
結果的にダイアログからダイアログ呼び出し元ページへの値の受け渡しができます。