通过服务打开对话框

Question

问题来了：

我有一个nav 栏，其中有一些nav options，包括位于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);
}
}

当我点击 login 时，我会弹出登录页面。我有另一个 nav 选项，它是受保护的路线。

{path: 'products', component: ProductsComponent, canActivate: [AuthGuard]}

假设我在某条路线上说solutions。从这里我登录，我将jwt token 存储在localstorage 中。然后我点击Products。由于用户已登录，它应该导航，或者如果没有用户登录，它应该弹出。

但我什么也得不到。出现以下错误：

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

CanActivateAuth.Guard.ts 方法

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

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

return false;
}

LoginService 与上述app.component 中的loginUser 方法相同

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();
}

我希望信息清楚。请告知是否需要进一步澄清。

问题是通过服务从不同组件打开dialog，而可以从单个组件轻松完成相同操作，即在这种情况下为app.component。

Answer 1

您可以尝试以下方法：

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) {
    ...
  }
}

还要检查我的 Plunker Example（ProductsModule 使用了延迟加载）