As per the documentation and git-hub issue comments, I am trying to implement a custom-injector to pass the data to a component that I am loading dynamically using @angular/cdk and cdkPortalOutlet.
I am able to see the PortalInjector getting created successfully using InjectorToken however while trying to fetch/use the data in the component which is loaded dynamically I am always getting a null.
data/injector.ts
import {InjectionToken,Injector} from '@angular/core';
import {PortalInjector} from '@angular/cdk/portal';
export const CONTAINER_DATA = new InjectionToken<{}>('CONTAINER_DATA');
export class DataInjector{
public createInjector(dataToPass,_injector): PortalInjector {
const injectorTokens = new WeakMap();
injectorTokens.set(CONTAINER_DATA, dataToPass);
return new PortalInjector(_injector, injectorTokens);
}
}
component/base.component.ts
var di:DataInjector= new DataInjector();
var pi:PortalInjector=di.createInjector("AutoMode",this._injector);
console.log("portalinjector passed is:");
console.log(pi);
cportal:Portal<any>=new ComponentPortal(ToolbarComponent,null,pi));
ToolbarComponent
import { Component, Inject,OnInit } from '@angular/core';
import {CONTAINER_DATA} from '../../data/injector';
@Component({
selector: 'app-toolbar',
templateUrl: './toolbar.component.html',
styleUrls: ['./toolbar.component.css']
})
export class ToolbarComponent implements OnInit {
@Inject(CONTAINER_DATA) public componentData: any
constructor() {
console.log("ToolbarComponent^dataobtained constructo is:");
console.log(this.componentData);// prints null
}
ngOnInit() {
console.log("ToolbarComponent^dataobtained is:");
console.log(this.componentData); //prints null
}
}
The lines marked as //prints null, always prints null.
However
console.log("portalinjector passed is:");
console.log(pi);
Prints :
PortalInjector {_parentInjector: Injector_, _customTokens:
WeakMap}_customTokens: WeakMap {InjectionToken =>
"AutoMode"}_parentInjector: Injector_ {view: {…}, elDef: {…}}__proto__:
Object
Can someone let me know if I am missing anything?