将参数传递到角材料中的mddialog 2

Question

我正在使用Angular材料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-Meterial-mddialog-pass-In-in-in-in-in-in-in-in-in-in-in-in-pass，所以我尝试了此

@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-> TweetService-> TweetDialogComponent ）

您可以使用抽象类：

来解决

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的圆形依赖性