如何在动态添加的组件上使用事件发射器? [英] How can I use an event emitter on a dynamically added component?

问题描述

从>角度2-添加/即时删除组件，我想限制创建的组件数量.然后删除一个组件后，我试图将该事件发送给父对象，以便父对象知道当前创建的组件数量.

Working off of Eric Martinez' answer from Angular 2 - Adding / Removing components on the fly, I want to limit the amount of components created. And then after deleting a component, I'm trying to emit that event to the parent so the parent knows the number of components currently created.

在此柱塞中，我将组件数限制为4，然后正在尝试发出一个事件以降低计数.该事件没有发出.如何从动态添加的组件发出事件?

In this Plunker, I limit the number of components by 4, and then I'm trying to emit an event to lower that count back down. The event isn't emitting. How do you emit an event from a dynamically added component?

// dynamic component
@Component({
    selector : 'dynamic',
    template : `
    <div>
        Component number {{_idx}} <button (click)="remove()">Remove</button>
    </div>`
})
class DynamicCmp {
    _ref: ComponentRef;
    _idx: number;
    @Output lowerIndex = new EventEmitter<any>();
    remove() {
        this._ref.dispose();
        this.lowerIndex.emit(true);
    }
}

// Parent container component    
@Component({
    selector: 'my-app',
    template : `
        <button (click)="add()">Add new component</button>
        <div #location (lowerIndex)="lowerIndex();"></div>
    `
})
export class App {
    idx: number = 0;
    constructor(private _dcl: DynamicComponentLoader, private _e: ElementRef) {}

    lowerIndex() {
        this.idx--;
        console.log("subtracted");
    }

    add() {
        if (this.idx < 4) {
            this._dcl.loadIntoLocation(DynamicCmp, this._e, 'location').then((ref) => {
            ref.instance._ref = ref;
            ref.instance._idx = this.idx++;
            });

            console.log("added")
        }
    }
}

我在此处发布了组件，因为stackoverflow要求使用代码链接发布代码.代码与插入器

I posted the components in here because stackoverflow requires code posted with plunker links. Code is exactly the same as seen in plunker

推荐答案

这里的问题是动态加载的组件与其加载的组件之间没有父/子关系.这就是为什么要从中访问属性动态加载的组件，您必须使用ref.instance.property.该组件没有与父组件一起编译，因此父组件对 foster 组件一无所知.

The issue here is that dynamically loaded components don't have a parent / child relationship with the components where they're loaded in. That's why to access properties from the dynamically loaded component you have to use ref.instance.property. The component is not being compiled along with the parent, therefore the parent knows nothing about the foster component.

现在，话虽这么说，您能做的就是制作一个可以订阅的属性，并

Now, that being said, what you can do is to make a property that you can subscribe to and I wouldn't use an EventEmitter for that.

我的解决方案是改用Subject(就像我在自己的小项目中所做的那样).

My solution would be to use a Subject instead (as I'm doing in a little project of my own).

您的动态组件看起来像这样

Your dynamic component would look like this

class DynamicCmp {

    // Subject instead of an EventEmitter
    lowerIndex: Subject<boolean> = new Subject();

    remove() {
        // We send true, although in the example is not being used
        this.lowerIndex.next(true);

        // Remove the component from the view
        this._ref.dispose();
    }
}

您要在其中加载动态组件的组件

Your component where you're loading the dynamic component

template : '<div #location></div>'; // Note that I removed (lowerIndex)="..."
this._dcl.loadIntoLocation(DynamicCmp, this._e, 'location').then((ref) => {
    //...

    // Subscribe to the Subject property
    ref.instance.lowerIndex.subscribe(v => {
        this.idx--;
        console.log("subtracted");
    });
});

这是您的 plnkr 并已更新至beta.12.

Here's your plnkr working and updated to beta.12.

这篇关于如何在动态添加的组件上使用事件发射器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！