在 Angular Material 2 中将参数传递给 MdDialog
Pass parameter to MdDialog in Angular Material 2
我正在使用 Angular Material 2,我想用 MdDialog 打开一个对话框 window,它显示有关存储在 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);
}
}
模板就这么简单
<h1>{{ (user | async)?.email }}</h1>
用户存储在 Firebase 中,问题是对话框 window 会在短时间内显示 null,直到检索到用户。所以我想,好吧,也许在 TweetService 中检索用户并将其作为参数传递给 TweetDialogComponent 是个好主意,但后来我意识到我不知道该怎么做。
我看到了这个 所以我尝试了这个
@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
您遇到了循环依赖。 (TweetDialogComponent --> TweetService --> TweetDialogComponent)
您可以通过使用摘要来解决 class:
基础-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 打开一个对话框 window,它显示有关存储在 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);
}
}
模板就这么简单
<h1>{{ (user | async)?.email }}</h1>
用户存储在 Firebase 中,问题是对话框 window 会在短时间内显示 null,直到检索到用户。所以我想,好吧,也许在 TweetService 中检索用户并将其作为参数传递给 TweetDialogComponent 是个好主意,但后来我意识到我不知道该怎么做。
我看到了这个
@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
您遇到了循环依赖。 (TweetDialogComponent --> TweetService --> TweetDialogComponent)
您可以通过使用摘要来解决 class:
基础-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 {
另见