将参数传递给Angular Material 2中的MdDialog [英] Pass parameter to MdDialog in Angular Material 2

问题描述

我正在使用Angular Material 2，我想用MdDialog打开一个对话框窗口，其中显示了有关存储在Firebase中的用户的一些信息.

I'm using Angular Material 2 and I want to open a dialog window with MdDialog which shows some information about a user stored in firebase.

@Injectable()
export class TweetService {

  dialogRef: MdDialogRef<TweetDialogComponent>;

  constructor(public dialog: MdDialog) {
  }

  sendTweet(viewContainerRef: ViewContainerRef) {
    let config = new MdDialogConfig();
    config.viewContainerRef = viewContainerRef;

    this.dialogRef = this.dialog.open(TweetDialogComponent, config);

    this.dialogRef.afterClosed().subscribe(result => {
      this.dialogRef = null;
    });
  }
}

@Component({
  selector: 'app-tweet-dialog',
  templateUrl: './tweet-dialog.component.html'
})
export class TweetDialogComponent implements OnInit {
  private user: FirebaseObjectObservable<any[]>;

  constructor(
    public dialogRef: MdDialogRef<TweetDialogComponent>,
    private usersService: UsersService,
    private authService: AuthService) { }

  ngOnInit() {
    let uid = this.authService.getUser().uid;
    this.user = this.usersService.getUser(uid);
  }

}

模板就像这个atm一样简单

The template is a simple as this atm

<h1>{{ (user | async)?.email }}</h1>

用户存储在Firebase中，问题是在很短的时间内，对话框窗口显示为空，直到检索到用户为止.所以我认为，好的，也许是在TweetService中检索用户并将其作为参数传递给TweetDialogComponent的一个好主意，但是后来我意识到我不知道该怎么做.

The user is stored in Firebase, and the problem is that for a brief moment the dialog window displays null until the user is retrieved. So I thought, ok, maybe is a good idea to retrieve the user in TweetService and pass it as a parameter to the TweetDialogComponent, but then I realized I don´t know how to do that.

我看到了这个 angular2-material-mddialog-pass-in-variable 所以我尝试了

I saw this angular2-material-mddialog-pass-in-variable and so I tried this

@Injectable()
export class TweetService {

  private dialogRef: MdDialogRef<TweetDialogComponent>;
  private user: FirebaseObjectObservable<any[]>;

  constructor(
    private dialog: MdDialog,
    private usersService: UsersService,
    private authService: AuthService) {
  }

  getUser(): FirebaseObjectObservable<any[]> {
    return this.user;
  }

  sendTweet(viewContainerRef: ViewContainerRef) {
    let config = new MdDialogConfig();
    config.viewContainerRef = viewContainerRef;

    let uid = this.authService.getUser().uid;
    this.user = this.usersService.getUser(uid);

    this.dialogRef = this.dialog.open(TweetDialogComponent, config);

    this.dialogRef.afterClosed().subscribe(result => {
      this.dialogRef = null;
    });
  }
}

@Component({
  selector: 'app-tweet-dialog',
  templateUrl: './tweet-dialog.component.html'
})
export class TweetDialogComponent implements OnInit {
  private user: FirebaseObjectObservable<any[]>;

  constructor(
    public dialogRef: MdDialogRef<TweetDialogComponent>,
    private tweetService: TweetService) { }

  ngOnInit() {
    this.user = this.tweetService.getUser();
  }

}

但这给我一个错误Can't resolve all parameters for TweetDialogComponent: (MdDialogRef, ?).

关于如何执行此操作的任何想法? 谢谢，

Any idea on how to do this? Thanks,

更新

似乎这可能与桶中的导入顺序有关，但是我没有使用桶，而是直接从文件中进行导入. 这是我的ngModule声明(对不起，这有点长...)

It seems this might be related with the order of imports in the barrels, but I'm not using barrels, I'm doing the imports directly from the file. This is my ngModule declaration (sorry, it's a bit long...)

@NgModule({
  declarations: [
    AppComponent,
    ProfileComponent,
    PeopleComponent,
    TimelineComponent,
    TweetDialogComponent,
    ProfilePipe
  ],
  entryComponents: [
    TweetDialogComponent
  ],
  imports: [
    routing,
    BrowserModule,
    AuthModule,
    AngularFireModule.initializeApp(firebaseConfig, firebaseAuthConfig),
    MaterialModule.forRoot()
  ],
  providers: [
    AUTH_PROVIDERS,
    AuthGuard,
    UsersService,
    { provide: TweetService, useClass: TweetService },
    { provide: LocationStrategy, useClass: HashLocationStrategy },
    { provide: APP_BASE_HREF, useValue: '/' }
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

TweetService在我的AppComponent中运行正常，因此提供程序应该没有问题. 这是我的TweetDialogComponent中的导入顺序(我看不到任何错误).

TweetService is working fine in my AppComponent, so there shouldn´t be a problem with the provider. This is the sequence of imports in my TweetDialogComponent (I can´t see anything wrong).

import { Component, OnInit } from '@angular/core';
import { MdDialogRef } from '@angular/material/dialog';

import { FirebaseObjectObservable } from 'angularfire2';

import { TweetService } from '../../shared/services/tweet.service';

(对于受影响的组件而言)项目的结构是这样的:

The structure of the project (for the affected component) is this:

src/app/
       /app.module.ts
       /app.component.ts
       /shared/services/
                       /tweet.service.ts
                       /users.service.ts
       /components/tweet-dialog/
                               /tweet-dialog.component.ts

推荐答案

您面临循环依赖. ( TweetDialogComponent-> TweetService-> TweetDialogComponent )

You faced with a circular dependency. (TweetDialogComponent --> TweetService --> TweetDialogComponent)

您可以通过使用抽象类来解决:

You can work around by using an abstract class:

base-tweet.service.ts

import { ViewContainerRef } from '@angular/core';

export abstract class BaseTweetService {
  getUser() {};

  sendTweet(viewContainerRef: ViewContainerRef) {}
}

app.module.ts

{ provide: BaseTweetService, useClass: TweetService },

app.component.ts

constructor(
    ...
    private tweetService: BaseTweetService, 

tweet-dialog.component.ts

constructor(
  ...
  private tweetService: BaseTweetService) {  

tweet.service.ts

export class TweetService implements BaseTweetService {

另请参见

• Angular2:2个服务相互依赖
• Angular 2和SystemJS的循环依赖

• Angular2: 2 services depending on each other
• Circular dependency with Angular 2 and SystemJS

这篇关于将参数传递给Angular Material 2中的MdDialog的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！