Question

我正在尝试将ViewContainerRef注入服务，但收到错误No provider for ViewContainerRef!。我找到了this PR，它完全解决了我所追求的问题，似乎已经合并了。

请注意，我知道如何使用this使用占位符来实现此目的。

Answer 1

服务对任何视图都是完全不可知的。如果您尝试使用与特定视图关联的服务，则应将其添加到特定父组件/指令中的提供者列表中，并将ViewContainerRef作为参数传递给其中一个服务方法。

Answer 2

努力工作，因为它一直抱怨ContainerRef

错误错误：未捕获（在承诺中）：错误：没有ViewContainerRef的提供程序！错误：没有ViewContainerRef的提供程序！

import { Injectable, ViewContainerRef } from '@angular/core';
import { Route, CanActivate, CanLoad } from '@angular/router';
import { AuthenticationService } from "../../services";

import { Host, SkipSelf } from '@angular/core';
import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/modal-dialog";

import { LoginControlComponent } from "../../controls/login/login.control.component"

// import { TNSFancyAlert, TNSFancyAlertButton } from 'nativescript-fancyalert';

@Injectable()
export class AuthGuard implements CanActivate, CanLoad {

constructor(

    private authenticationService: AuthenticationService,
    private modalService: ModalDialogService,
    @SkipSelf() @Host() private viewContainerRef: ViewContainerRef
    // private router: Router
) {

}

canActivate(): Promise<boolean> {

    console.log("Auth Guard Checked !!");

    return new Promise((resolve, reject) => {
        if (this._isAuth()) {
            resolve(true);
        } else {


            // use generic selection modal
            let options: ModalDialogOptions = {
                context: {
                    title: "Login",
                    desc: "Please Enter you Username/email and password"

                },
                fullscreen: false,
                viewContainerRef: this.viewContainerRef
            };

            this.modalService.showModal(LoginControlComponent, options)
            .then(x=>{

            })

        }
    });
}
// canActivate(): Promise<boolean> {

//     console.log("Auth Guard Checked !!");

//     return new Promise((resolve, reject) => {
//         if (this._isAuth()) {
//             resolve(true);
//         } else {
//             // login sequence to continue prompting unless canceled
//             let promptSequence = (usernameAttempt?: string) => {
//                 this.authenticationService.promptLogin('Please enter your username and password', usernameAttempt)
//                     .then(() => {
//                         console.log("User Verified");
//                         resolve(true);
//                     },
//                     (usernameAttempt) => {
//                         if (usernameAttempt === false) {
//                             // user canceled prompt
//                             console.log("User Cancelled");
//                             resolve(false);
//                         } else {
//                             // initiate sequence again
//                             console.log("INI Seq. again");
//                             promptSequence(usernameAttempt);
//                         }
//                     });
//             };
//             // start login prompt sequence
//             // require auth before activating
//             promptSequence();
//         }
//     });
// }

canLoad(route: Route): Promise<boolean> {
    return this.canActivate();
}


private _isAuth(): boolean {
    console.log("Authencticated Value ", this.authenticationService.authenticated$.getValue());
    return this.authenticationService.authenticated$.getValue();
}

}

Answer 3

通过将其添加为app.module（和仅app模块）中的提供者，使您单身需要viewContainerRef的服务；将该服务注入您需要containerRef的构造函数的组件中，并使其在服务中调用setter方法，该方法将其containerRef设置为服务中的变量以供将来使用。

您要传递其引用的组件

export class PrintPortalComponent {

  constructor(
    private printPortalService: PrintPortalService, 
    public viewContainerRef: ViewContainerRef
  ) {
    this.printPortalService.printPortalRef = this.viewContainerRef;
  }

}

您的单例服务

export class PrintPortalService {

  public viewContainerRef: ViewContainerRef;

  set printPortalRef(vcr: ViewContainerRef) {
    this.viewContainerRef = vcr;
  }
}

我为此奋斗了几个小时，直到发现：How do I create a singleton service in Angular 2?

如何将ViewContainerRef注入服务？

3 个答案: