Question

我尝试创建自己的结构指令，可以创建一些DOM结构（在我的情况下是按钮组）。我想为包装器和子项创建自定义标签并应用自定义类。

我坚持下去 - 输出事件。我完成了指令。它正在工作。（我在这个指令中进行DOM操作）。但是现在我无法通过这个指令发出事件9我找到了答案，因为事件应该是静态的。喜欢 - (click)="some()") 但如果我的孩子动态创建，我该怎么做呢？（现在我使用AddEventListener）。

并出现此错误： onBtn上的事件绑定未被嵌入式模板上的任何指令发出

感谢您提供任何信息。

这是我的组件代码：

import {Component, Injectable, Input, Output, EventEmitter, OnInit, ElementRef} from '@angular/core';

import { BtnGroupChildStructure } from './button_group.directive';
import { Config } from 'appConfig';
/* ------- !Config  ---------*/

const MODULE_NAME: string = 'button_group';
const MODULE_PATH: string = `${Config.getProdFolderName()}/shared/components/${MODULE_NAME}`;

@Component({
    selector : 'cgm_button_group',
    template : `<template *btnGroupChildStruct="config" 
                (onBtnClick)="t_handleBtnClick($event)"></template>`,
    host : {'class': 'button-group-box'},
    directives : [
        BtnGroupChildStructure
    ]
})
@Injectable()
export class ButtonGroupComponent implements OnInit {

    private _config: Object;

    @Input() config(val: Object) {
        console.log(val);
        Object.assign(this._config, val);
        console.log(this._config);
    }

    @Output onBtnClick = new EventEmitter<string>();

    ngOnInit() {

    }

    private t_handleBtnClick(buttonName: string): void {
        this.onBtnClick.emit(buttonName);
    }
}

这是指令代码

import { Directive, Input, 
    ViewContainerRef, ElementRef, TemplateRef, OnInit, Output, EventEmitter } from '@angular/core'

@Directive({ selector : '[btnGroupChildStruct]'})
export class BtnGroupChildStructure implements OnInit {

    private _hostEl;
    private _config: Object = {};

    @Input() set btnGroupChildStruct(val: Object) {
        console.log(val);
        Object.assign(this._config, val);
    }

    @Output() onBtnClick = new EventEmitter<string>();

    constructor(
        private _templateRef: TemplateRef<any>,
        private _viewContainer: ViewContainerRef,
        private _elementRef: ElementRef
    ) {
        this._hostEl = this._elementRef.nativeElement.parentElement;

    }

    ngOnInit() {
        //console.log(this._templateRef);
        this._generateChilds();
        this._hostEl.appendChild(this._generateGroup());
        //this._viewContainer.createEmbeddedView(this._templateRef);
    }

    /**
     * _generateChilds -> generate childs structure
     * @returns {DocumentFragment}
     * @private
     */
    private _generateChilds(): DocumentFragment {
        let fragment = document.createDocumentFragment();

        if (this._config.hasOwnProperty('buttonNamesList')) {
            this._config.buttonNamesList.forEach((buttonName) => {
                let item = document.createElement(this._config.tagChild);
                this._addClasses(item, this._config.childClasses);
                item.textContent = buttonName;
                this._addClickHandler(item);
                fragment.appendChild(item);
            })
        } else {
            throw new Error('Button group Directive. _generateChilds. Can"t get _config buttonNamesList prop');
        }

        return fragment;

    }

    /**
     * _generateGroup -> generate button group
     * @returns {HTMLElement}
     * @private
     */
    private _generateGroup(): HTMLElement {
        let wrapperTag;
        if (this._config.hasOwnProperty('tagWrapper')) {
            wrapperTag = document.createElement(this._config.tagWrapper);
            this._addClasses(wrapperTag, this._config.wrapperClasses);
            wrapperTag.appendChild(this._generateChilds());
        } else {
            throw new Error('Button group Directive. _generateGroup. Can"t get _config tagWrapper prop');
        }

        return wrapperTag;
    }

    /**
     * _addClasses -> Add classes to el
     * @param el (HTMLElement) -> handled Element
     * @param classesStr (String) -> string of classes
     * @private
     */
    private _addClasses(el: HTMLElement, classesStr: string): void {
        if (!el || !classesStr) throw new Error('_addClasses. Missed one of parameter');
        el.className = classesStr
    }

    private _addClickHandler(el: HTMLElement): void {
        if (!el) throw new Error('_addClickHandler. Non exist element');
        el.addEventListener('click', (el) => {
            this.onBtnClick.emit(el.textContent);
        })
    }

}

Angular 2模板无法获得事件绑定

0 个答案: