Question

我正在使用Angular Material 2，我想打开一个带有MdDialog的对话窗口，其中显示了有关存储在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一样简单

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

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

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

@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, ?).

有关如何做到这一点的任何想法？谢谢，

更新

似乎这可能与桶中的进口顺序有关，但我没有使用桶，我正在直接从文件中进口。这是我的ngModule声明（抱歉，它有点长......）

@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中的导入序列（我看不出任何错误）。

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

import { FirebaseObjectObservable } from 'angularfire2';

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

项目的结构（针对受影响的组件）是：

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

Answer 1

你面临循环依赖。（ TweetDialogComponent - ＆gt; TweetService - ＆gt; TweetDialogComponent ）

您可以使用抽象类来解决这个问题：

<强>基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,

<强>鸣叫-dialog.component.ts

constructor(
  ...
  private tweetService: BaseTweetService) {

<强> tweet.service.ts

export class TweetService implements BaseTweetService {

另见

将参数传递给Angular Material 2中的MdDialog

1 个答案: