angular-material - 无法在 Angular 材料中使用 PortalInjector 捕获组件中的数据
问题描述
根据文档和 git-hub 问题评论,我正在尝试实现一个自定义注入器,以将数据传递给我使用@angular/cdk
和动态加载的组件cdkPortalOutlet
。我可以看到 PortalInjector 被成功创建,InjectorToken
但是在尝试获取/使用data
动态加载的组件时,我总是得到一个null
.
数据/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);
}
}
组件/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));
工具栏组件
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
}
}
标记为 //prints null 的行,总是 prints null
。然而
console.log("portalinjector passed is:");
console.log(pi);
印刷 :
PortalInjector {_parentInjector: Injector_, _customTokens:
WeakMap}_customTokens: WeakMap {InjectionToken =>
"AutoMode"}_parentInjector: Injector_ {view: {…}, elDef: {…}}__proto__:
Object
如果我遗漏了什么,有人可以告诉我吗?
解决方案
推荐阅读
- mono - 如何在 Centos7 上从 Mono repo 安装旧版本的 Mono 5.20?
- python - 为什么具有零数据集的 XGBoost 返回非零预测?
- reactjs - 如何从容器中分离样式化的组件并使 Jest 工作
- android - 使用 Jacoco 测量多模块和动态功能模块 Android 项目中的测试覆盖率
- reactjs - Reactotron-react-native#react-native-flipper#react-native@^0.62.0" 不满足 "react-native@0.63.2" 的匹配
- git - Rstudio 中的 Git 未跟踪本地更改且不可推送
- excel - 如何将循环中的文件保存为启用 xlsm 宏的格式?
- go - GO GORM 外键约束未创建
- junit - 如果我想传递一个 Junit xml 中包含的元素超过了 junit 中提到的元素,我该怎么办?
- python - 对插入数据库的python数据类型感到困惑