Question

所以我搜索了谷歌找不到任何有关此例外的内容。

platform-browser.umd.js:1900 EXCEPTION: Error: Uncaught (in promise): No provider for ViewUtils!

我要做的是动态创建和插入一个组件，并用一个对象注入它：

所以我创建的baseClass看起来像这样：

import { Component, OnInit, AfterViewInit, OnDestroy, ComponentResolver, ViewContainerRef, Injector, ReflectiveInjector, provide} from '@angular/core';
...
import { customNode } from '../my-own-types/backend.types';
import { LandingComponent } from '../../pages/landing/landing.component';

@Component({
    moduleId: module.id,
    template: '<template #page_content></template>)',
    providers: [ NodeService ]
})

export class BaseComponent implements OnInit, AfterViewInit, OnDestroy {
    private error:string | boolean = false;
    private cmpRef:any;

    constructor(
        private _injector: Injector,
        private VCR: ViewContainerRef,
        private CR: ComponentResolver
    ) {}

    ...

    ngAfterViewInit() {
        ... //getting node from service
        if (node) {
            let resolvedProviders = ReflectiveInjector.resolveAndCreate([
                    provide(customNode, {useValue: node})
                ]);
            // let child = ReflectiveInjector.fromResolvedProviders(resolvedProviders, this._injector);
            switch (node.type || '') {
                case 'landing' :
                    this.CR.resolveComponent(LandingComponent).then((factory) => {
                        this.cmpRef = this.VCR.createComponent(factory, 0, resolvedProviders, []);
                    });
                break;
                default: {
                    console.log("BASE COMPONENT: ERROR!!!!");
                }
            }
        }
    }
    ...
}

在我的LandingComponent的构造函数中，我想做这样的事情：

    constructor(
        private node: customNode,
        private _injector: Injector) {

        console.log("Landing page constructed");

        this.loadNode = (node) => {
            this.content = node.content;
            this.created = node.created;
        }
        if (!this.node)
            this.node = _injector.get("node");
        if (this.node)
            this.loadNode(this.node)
    }

Answer 1

您是否尝试添加父注入器？

 let resolvedProviders = ReflectiveInjector.resolveAndCreate([
                provide(customNode, {useValue: node})
            ], this._injector);

Answer 2

所以我找到了一种让它起作用的方法，现在已经足够好了，但我猜不是很好的练习。

解决方案：我没有使用reflectInjectors，只是调用LandingComponent中定义的函数。

在我的baseComponent中，AfterViewInit我现在有：

ngAfterViewInit() {
    ... //Code to get node
    if (node) {
        switch (node.type || '') {
            case 'page' :
                this.CR.resolveComponent(LandingComponent).then((factory) => {
                    this.VCR.clear();
                    this.cmpRef = this.VCR.createComponent(factory, 0, this._injector, []);
                    this.cmpRef.instance.loadNode(node);
                    return this.cmpRef;
                });
            break;
            default: {
                console.log("BASE COMPONENT: ERROR!!!!");
            }
        }
    }
}

My LandingComponent现在看起来像：

constructor(private node: customNode, private _injector: Injector) {}

loadNode(node) {
    this.content = node.content;
    this.created = node.created;
}

Angular2没有ViewUtils的提供者

2 个答案: