Question

问题在于：

我有一个nav栏，其中包含{{1>}个登录按钮，位于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);
}
}

假设我在某条路线上说{path: 'products', component: ProductsComponent, canActivate: [AuthGuard]}。从这里我登录，我将solutions存储在jwt token中。然后我点击localstorage。由于用户已登录，因此应该导航，或者如果没有用户登录则应该弹出。

但我一无所获。出现以下错误：

Products

Auth.Guard.ts的

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

CanActivate

canActivate() { if (tokenNotExpired()) { return true; } this.loginService .loginUser(this.viewContainerRef) .subscribe(res => this.result = res); return false; }与LoginService

中的loginUser方法相同

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(); }，同时可以从单个组件轻松完成，例如dialog。

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使用了延迟加载）

通过服务打开对话框

1 个答案: