Angular 通过服务打开对话框

问题是：

我有一个

nav

栏，有一些

nav选项

，包括登录按钮，它位于

app.component.html

这是AppComponent的结构：

export class AppComponent {

logInDialogRef: MdDialogRef<LoginComponent>;

public constructor(public http: Http, private viewContainerRef: ViewContainerRef, 
          public dialog: MdDialog) {}

loginUser(){
    let config = new MdDialogConfig();
    config.viewContainerRef = this.viewContainerRef;
    config.role = 'dialog';
    config.width = '40%';
    this.logInDialogRef = this.dialog.open(LoginComponent, config);
}
}

假设我在某条路线上，比如说

解决方案

。从这里我登录，我将

jwt令牌

存储在

localstorage

中。然后我点击

产品

。因为用户已经登录，所以它应该导航，或者如果没有用户登录，它应该弹出窗口

但我什么也得不到。获取以下错误：

EXCEPTION: Uncaught (in promise): Error: No provider for ViewContainerRef!

CanActivate

Auth.Guard.ts的方法

canActivate() {
if (tokenNotExpired()) {
    return true;
}

this.loginService
    .loginUser(this.viewContainerRef)
    .subscribe(res => this.result = res);

return false;
}

LoginService

具有与上述

app.component

app/login/login.service.ts

public loginUser(viewContainerRef: ViewContainerRef): Observable<any> {

    let dialogRef: MdDialogRef<LoginComponent>;
    let config = new MdDialogConfig();
    config.viewContainerRef = viewContainerRef;
    config.role = 'dialog';
    config.width = '40%';
    dialogRef = this.dialog.open(LoginComponent, config);
    return dialogRef.afterClosed();
}

公共登录用户（viewContainerRef:viewContainerRef）：可观察{ 让dialogRef:MdDialogRef； 让config=newMDDialogConfig（）； config.viewContainerRef=viewContainerRef； config.role='dialog'； config.width='40%'； dialogRef=this.dialog.open（LoginComponent，config）； 返回对话框ref.afterClosed（）； } 我希望信息是清楚的。请告知是否需要进一步澄清

---

问题是通过服务从不同的组件打开

对话框

，而从单个组件也可以轻松打开

对话框，即在这种情况下，
应用组件
。
您可以尝试以下操作：

Auth.Guard.ts

@Injectable()
export class AuthGuard implements CanActivate {
  viewContainerRef: ViewContainerRef;
  constructor(private appRef: ApplicationRef) {
    this.viewContainerRef = appRef.components[0].instance.viewContainerRef;
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    ...
  }
}

另请检查我的（在
产品模块中使用了延迟加载）
您能否向我们显示
AuthGuard
的完整代码？这或多或少是
AuthGuard
中的代码。我正在使用
angular2 jwt
库进行身份验证，在不使用
dialogbox
的情况下，该库工作正常，即有单独的登录路径。您在AuthGuard的构造函数中是否有
private viewContainerRef:viewContainerRef
？这就是问题所在。此服务没有看到您的InjectingMake是公共的，但不起作用。这无关紧要。Angular找不到itError的提供程序关于
ViewContainerRef
的错误已消失。但是现在它找不到
MdDialogRef
。出现另一个错误
错误：没有MdDialogRef的提供程序

@Injectable()
export class AuthGuard implements CanActivate {
  viewContainerRef: ViewContainerRef;
  constructor(private appRef: ApplicationRef) {
    this.viewContainerRef = appRef.components[0].instance.viewContainerRef;
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    ...
  }
}