- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在尝试使用@ViewChild 将组件动态注入(inject)到父位置,但出现错误:
Cannot read property 'createComponent' of undefined
在我尝试注入(inject)的 ReferenceTableComponent 组件上
@Component({
selector: 'app-reference-table',
templateUrl: './refTable.component.html',
styleUrls: ['./refTable.component.scss']
})
export class ReferenceTableComponent implements OnInit {
observable: Observable<any>;
@ViewChild('selectorTarget', {read: ViewContainerRef}) selectorTarget;
// colors
@Input() public datas: Array<string>;
public availableColors: Array<string>;
@Input() public nextRow: Array<string>;
//tailles
@Input() public headList: Array<string>;
public rows: Array<any> = [{}];
public rowIDs: Array<any> = [];
constructor(private _cr: ComponentFactoryResolver, private _viewContainerRef: ViewContainerRef) {
}
ngOnInit() {
this.computeAvailableColors();
}
addRow() {
console.log('this.availableColors 2: ', this.availableColors)
this.rows.push({});
}
computeAvailableColors() {
this.availableColors = _.concat([''], this.datas);
this.rowIDs = _.map(this.rows, 'color')
this.availableColors = _.difference(this.availableColors, this.rowIDs);
const select: ComponentRef<SelectOptionsComponent> =
this.selectorTarget.createComponent(
this._cr.resolveComponentFactory(SelectOptionsComponent)
);
select.instance.availableColors = this.availableColors;
select.instance.row = this.rows[0];
}
在我的组件 html 上
<td onSelectColor($event) #selectorTarget>
</td>
我要注入(inject)的组件
@Component({
selector: 'kia-select-options',
template: `<div><select [(ngModel)]="row.color" (ngModelChange)="sendColorEvent(row, $event)">
// value is a string or number
<option *ngFor="let obj of availableColors">{{obj}}</option>
</select></div>`
})
export class SelectOptionsComponent {
// couleurs
@Input() public availableColors: Array<string>;
@Input() public row: {};
public color: string;
@Output()
public changed = new EventEmitter();
constructor(private injector: Injector) {
}
sendColorEvent(row, color) {
console.log(event)
this.changed.emit({ color: color, row: row });
}
}
知道 ReferenceTableComponent 是从使用的父组件动态自加载的,并且工作正常
@ViewChild('target', {read: ViewContainerRef}) target;
const factory = this.componentFactoryResolver.resolveComponentFactory(ReferenceTableComponent);
const ref = this.target.createComponent(factory);
最佳答案
@ViewChild()
查询在 ngOnInit()
中不可用。仅当 ngAfterViewInit()
被调用时:
ngAfterViewInit() {
this.computeAvailableColors();
}
关于angular - 无法使用 ViewContainerRef 读取未定义的属性 'createComponent',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45145449/
假设我们有以下内容: @Directive({ selector: "[appSome]" }) export class SomeDirective { public constructor
假设我们有以下内容: @Directive({ selector: "[appSome]" }) export class SomeDirective { public constructor
有一种情况,我想在单击按钮时清除“viewContainer”,但它显示错误 ERROR TypeError: Cannot read property 'viewContainer' of unde
只是尝试阐明 ViewContainerRef.createComponent 中索引参数的含义: createComponent( componentFactory: ComponentFa
我想在 Angular 4 中创建嵌套组件 这是选择器组件 import {InputComponent} from './input/input.component' import {BlockCo
我正在尝试显示一个类似于(不完全) Angular 文档中示例的动态组件。 我有一个带有 viewContainerRef 的动态指令 @Directive({ selector: '[dyna
我正在创建一个“组件工厂”来帮助我动态创建组件。该工厂用于创建类似的组件; PopOvers、Modals、Overlays 等 它有一个 attach 方法来创建组件: attach(compone
升级到 Angular 7 后,我得到 parentInjector is deprecated: No replacement在我的代码中。由于这显然已被弃用,为什么没有可用的更新,或者 Angul
给定用于 Dynamic Component Loading 的指令与 ViewContainerRef注入(inject): import { Directive, ViewContainerRef
所以我目前正在尝试创建嵌套评论,并且我目前正在引入一个动态表单组件,以便人们可以回复评论。当只有 parent 和 child 时,它效果很好,但如果有 sibling ,它会选择第一个。例如, --
所以我目前正在尝试创建嵌套评论,并且我目前正在引入一个动态表单组件,以便人们可以回复评论。当只有 parent 和 child 时,它效果很好,但如果有 sibling ,它会选择第一个。例如, --
什么更好?使用 ngFor 或 ViewContainerRef 动态创建组件?有什么区别? 例如,如果我有一个创建新元素的按钮,每次按下它都会生成一个新组件。 1) 第一个选项如下 items: n
我有一个组件: @Component({ selector: 'vcrdi', template: ` ViewContainerRef DI `, })
我使用 viewContainerRef.createComponent 将动态组件加载到根组件中(......),但实际上它附加了错误的位置, 我的代码: -----app.compoment.ts
当我使用 ViewContainerRef 创建组件并将实例分配给负责创建子组件的父组件的属性时,是否需要将此属性设置为 null 如果我想释放内存,在调用 ViewContainerRef.clea
有没有办法从动态创建的组件中获取 ViewContainerRef?我动态创建的组件内部有一个 ngContent 元素,我想在动态创建后填充它。 export class Example { @
我是这样动态添加组件的: export class CustomersOverviewComponent implements OnInit, OnDestroy { @ViewChild(Pan
嘿,我现在正在逐步学习 Angular 2,并且我已经构建了一个名为 except 的结构自定义指令。除非行为与 ngIf act 相同,否则如果我的条件为真,则将元素附加到 dom,否则将其分离。这
我正在尝试获取 ViewContainerRef 中动态创建的组件的 index 我需要获取索引,这样我也可以销毁组件。 代码如下 @ViewChild('dynamicInsert', { read
@Component({ selector: 'my-cmp', template: ` ` }) export class MyCmp { @ViewChild('target',
我是一名优秀的程序员,十分优秀!