WedX - журнал о программировании и компьютерных науках

Angular 2 ng-content получает событие от дочернего компонента

Я создаю страницу с несколькими динамическими панелями, каждая дочерняя панель имеет один и тот же HTML-код, поэтому я создал компонент родительской панели, чтобы обернуть каждую из них.

Проблема в том, что я хочу отправить событие от дочернего элемента на панель, но, похоже, не могу найти ответа. Вот что у меня есть на данный момент:

// Panel Panel Component
@Component({
    selector: 'panel',
    template: `
    <div (emittedEvent)="func($event)">
        <ng-content></ng-content>
    </div>
    `
})
export class PanelComponent {

    constructor() {}

    func(event) {
    // Do stuff with the event
    }
}
// Child Panel Component (one of many)
@Component({
selector: 'child-panel-one',
template: `
    // Template stuff
    <button (click)="emitEvent()">Click</button>
`
})
export class ChildPanelOne {
emittedValue: Boolean = false;

@Output() emittedEvent = new EventEmitter();

constructor() {}

private emitEvent() {
    this.emittedValue = true;

    this.emittedEvent.emit(this.emittedValue)
}
}
//
// Main Parent Template
<panel>
    <child-panel-one></child-panel-one>
</panel>

Я мог бы создать общую службу, но передача логического значения от дочернего к родительскому кажется излишним.

Любые идеи?

Спасибо


Ответы:


1

Есть несколько способов

<panel #p>
    <child-panel-one (emittedEvent)="p.func($event)"></child-panel-one>
</panel>

но для этого требуется, чтобы пользователь <panel> настроил привязку события

или вы можете событие DOM, подобное показанному в в Angular2 как узнать, когда ЛЮБОЕ поле ввода формы потеряло фокус

или вы можете использовать ´ @ ContentChildren () `, а затем обязательно подписаться

@ContentChildren(ChildPanelOne) childPanels:QueryList<ChildPanelOne>
ngAfterContentInit() {
  this.childPanels.toArray().forEach(cp => cp.emittedValue.subscribe(() => ...));
}

но для этого требуется, чтобы все дочерние панели были предопределенного типа.

Вы также можете использовать общий сервис с наблюдаемым, который дочерние компоненты внедряют и используют для отправки событий родительскому компоненту.

05.04.2017
  • Спасибо за ответ и ссылку. Служба кажется лучшим вариантом - в этом случае компоненту панели не нужны все дочерние панели, определенные, как вы описали выше. Я создал очень простой сервис, охватывающий панель и ее дочерние элементы, которые 05.04.2017
  • Для всех, у кого есть аналогичная проблема, этот Plunkr демонстрирует общий EmitterService plnkr.co/edit/Kt7jpEw p = предварительный просмотр 05.04.2017
  • Спасибо за ваш отзыв. Рад слышать, что вы смогли найти решение, которое работает для вас. Я бы тоже воспользовался услугой. 05.04.2017
  • Вы также можете позволить всему дочернему контенту наследовать от базового компонента с помощью универсального вывода (например, onChange) и подписаться на него в своем компоненте с помощью ‹ng-content› ‹/ng-content› в его шаблоне. 10.04.2017

  • 2

    Другой способ поймать событие от дочернего содержимого - взять ref родительской comp и определить

    constructor(app:AppComponent){ //<-- get the ref of the parent component
        app['clic'] = this.clic; //<-- declare function and bind our function 
        this.name = 'myself';
    }
    
    clic(){
        alert('clicked');
    }
    
    ngOnDestroy() {
        delete this.app['clic']; // <-- get rid of the function from parent component, when we are done
    }
    

    РАБОЧАЯ ДЕМО (ПРОВЕРИТЬ ТАКЖЕ)

    10.08.2019
    Новые материалы

    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..

    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..


    Для любых предложений по сайту: [email protected]