将参数传递给 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 中，问题是对话框窗口在短时间内显示为 null，直到检索到用户.所以我想，好吧，也许在 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();
}
}
但这给了我一个错误无法解析 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 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 {
另见
这篇关于将参数传递给 Angular Material 2 中的 MdDialog的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
