Angular2、イベントを親コンポーネントから子ディレクティブにブロードキャストする方法

Question

Angular1では、$scope.braodcastがあり、Angular2のEventEmitterは、子から親へのイベントのみを送信できます。だから私はそのイベントを子どもの指示にどのように伝えることができますか？

が、これは私の子供ディレクティブ

import { Directive, ElementRef, Input, Output, OnInit } from '@angular/core'; 

import { EventEmitter } from '@angular/core'; 


@Directive({ 
    selector: '[svgLine]' 
}) 


export class HighlightDirective implements OnInit { 
    message: string; 
    constructor(
    private el: ElementRef, 
) {} 
    @Input() svgLineClientWidth: number; 
    @Input() svgLineClientHeight: number; 
    @Input() svgToClientWidth: number; 
    @Input() svgToClientHeight: number; 
    @Input() svgLineFromId: number; 
    @Input() svgLineToId: number; 
    ngOnInit(): void { 
     // receive the event 
    } 
} 

であり、これは私の親コンポーネントである

import { Component, OnInit, EventEmitter, Output } from '@angular/core'; 
    import { Tools } from '../class/tools' 
    import { DetailListService } from './detail-list.service'; 

    @Component({ 
     // moduleId使用于CommonJs 
     moduleId : module.id, 
     selector : 'detail-list', 
     templateUrl : './detail-list.component.html', 
     styleUrls: ['./detail-list.component.css'], 
    }) 

    export class DetailListComponent implements OnInit { 
     constructor(
      private detailListService : DetailListService, 
    ) {} 
     clickItem() { 
     // broadcast the event here 
     } 
    } 

詳細-list.component.html

<svg class="svg--position"> 
     <g *ngFor="let item of model.data"> 
      <g pointer-events="painted" 
       svgLine 
       *ngFor="let to of item.to" 
       [svgLineClientWidth]="item.clientWidth" 
       [svgLineClientHeight]="item.clientHeight" 
       [svgToClientWidth]="to.clientWidth" 
       [svgToClientHeight]="to.clientHeight" 
       [svgLineFromId]="item.id" 
       [svgLineToId]="to.id"    
       id="{{item.title}}{{item.id}}{{to.id}}" 
      >      
      </g> 
     </g> 

    </svg> 

Answer 1

これにはさまざまな方法があります。しかし、私は最低限の構成で行くつもりです。

親に子供のために、あなたは持つEventEmitter APIで出力 APIを使用することができます

export class HighlightDirective implements OnInit {  
    ngOnInit(): void { 
     // receive the event 
    } 

    printf(message:string){ 
     alert(message); 
    } 
} 

parentComponentに

import {ViewChild} from '@angular/core'; 

export class DetailListComponent implements OnInit { 

    ViewChild('svgLine') vc:svgLine; 
    // you can have an access over svgLine diretive 

    clickItem() { 
    // broadcast the event here 

     this.vc.printf('Angular2'); 

    // Not sure if it can call ngOnInit as haven't tested it ever. 
    // But you can try calling and see if works. 
    // this.vc.onInit() something 
    } 
} 

svgLineDirective。何千もの例が利用可能です。