Angular 7：注入ngComponentOutlet的依赖项

问题描述

我需要为 ngComponentOutlet 使用某种 @Input（）装饰器。

但是Angular似乎没有此功能。相反，所有我想传递到插座组件中的东西都应该通过 Injector 提供。

而且还可以如果我想启动我想提供给可注射类的东西。但是我需要更深入地研究，并在创建Injector步骤时提供某种可观察的变量（例如 Observeble< number> 类型）。但是我无法在插座组件中获得可观察到的变量。出现以下错误： NullInjectorError：[object Object]没有提供程序！。

以下是代码示例，我从angular docs（）中得到了这种模式并进行了修改一点：

  @Injectable（）
出口等级Greeter {
后缀$：Observable< number> = null; 
构造函数（private _suffix $：Observable< number>）{
 this.suffix $ = this._suffix $; 
} 
} 
 
 @Component（{
选择器：'complete-component'，
模板：`Complete：{{greeter.suffix $ | async}}`
}）
出口类CompleteComponent {
构造函数（公共问候者：Greeter）{
 this.greeter.suffix $ .subscribe（data => console.log （数据，数据））； 
 //不起作用
} 
} 
 
 @Component（{
选择器：'ng-component-outlet-complete-example'，
模板：`
< ng容器* ngComponentOutlet = CompleteComponent; 
进样器：myInjector; 
}）
导出类NgTemplateOutletCompleteExample {
 CompleteComponent = CompleteComponent ; 
 myInjector：注入器； 
 
后缀$：Observable< number> = of（3）; 
 
构造函数（注入器：Injector）{
 this.myInjector = 
 Injector.create（{providers：[{provide：Greeter，deps：[this.suffix $]}] ，父代：注射器}）； 
} 
} 
  

所以我如何获得并订阅此 $ suffix 变量在插座组件内。

PS 如果我提供 NgTemplateOutletCompleteExample 放入 deps 数组，并在可注入组件<$ c中获得 NgTemplateOutletCompleteExample.suffix $ $ c> Greeter -可以使用。但问题是我有很多 NgTemplateOutletCompleteExample 组件，而这对我来说是无效的。

解决方案

最主要的是喷油器-是静态喷油器。因此，要在组件oultet中提供任何数据（或获取任何回调），我必须使用 useValue 代替 deps 。 / p>

NgTemplateOutletCompleteExample 中的构造函数应如下所示：

  constructor（injector：Injector）{
 this.myInjector = 
 Injector.create（{providers：[{provide：Greeter，deps：[]，useValue：{suffix $：this.suffix $}]，父级：jector}）； 
} 
  

I need to use some kind of @Input() decorator for my ngComponentOutlet.

But seems that Angular hasn't this feature. Instead, all things that I want to pass inside my outlet components should be provided via Injector.

And it's fine if I want to initiate the thing I want provide to inside injectable class. But I need to dive deeper and provide some kind of observable variable (Observeble<number> type for example) at creation Injector step. But I can't to get observable variable inside outlet component. Getting following error: NullInjectorError: No provider for [object Object]!.

Here is an example of code, I got this pattern from angular docs (angular.io/api/common/NgComponentOutlet) and modified a little:

@Injectable()
export class Greeter {
    suffix$: Observable<number> = null;
    constructor(private _suffix$: Observable<number>) {
        this.suffix$ = this._suffix$;
    }
}

@Component({
    selector: 'complete-component',
    template: `Complete: {{ greeter.suffix$ | async }}`
})
export class CompleteComponent {
    constructor(public greeter: Greeter) {
        this.greeter.suffix$.subscribe(data => console.log('data', data));
        // not working
    }
}

@Component({
    selector: 'ng-component-outlet-complete-example',
    template: `
        <ng-container *ngComponentOutlet="CompleteComponent;
                                        injector: myInjector;"
    })
export class NgTemplateOutletCompleteExample {
    CompleteComponent = CompleteComponent;
    myInjector: Injector;

    suffix$: Observable<number> = of(3);

    constructor(injector: Injector) {
        this.myInjector =
            Injector.create({providers: [{provide: Greeter, deps: [this.suffix$]}], parent: injector});
    }
}

So how can I get and subscribe into this $suffix variable inside outlet component.

P.S. If I provide NgTemplateOutletCompleteExample into the deps array and get NgTemplateOutletCompleteExample.suffix$ inside injectable component Greeter - it will work. But the thing is I have a lot of NgTemplateOutletCompleteExample components and this thing invalid in my case.

解决方案

The main thing is that Injector - is a static injector. So, to provide any data inside component oultet (or get out any callbacks) I must use useValue instead deps.

Contructor in NgTemplateOutletCompleteExample should be like this:

constructor(injector: Injector) {
    this.myInjector =
        Injector.create({providers: [{provide: Greeter, deps: [], useValue: {suffix$: this.suffix$}], parent: injector});
}

这篇关于Angular 7：注入ngComponentOutlet的依赖项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！