使用angular2在文件import svg中添加指令

Question

我有一个svg导入的文件，有Jquery，我想添加 指令：

$(seat).attr("myHighlight","");

这＆＃34; myHighlight＆＃34;是我的指令是使用jquery添加dinamically 我的指示是：<​​/ p>

import { Directive, ElementRef, Input } from '@angular/core';
declare var $:any;
@Directive({ 
  selector: '[myHighlight]' 
})
export class HighlightDirective {
  constructor(el: ElementRef) {
    $(el.nativeElement).css("fill","red");
  }
}

现在我将用于此指令的组件是

import { Component, OnInit, ViewChild,ElementRef, AfterViewInit } from 
'@angular/core';
import {Hero} from './hero';
import {HeroService} from './hero.service';

declare var $:any;

@Component({
  selector: 'my-heroes',
  template:
    <h2 myHighlight>My Heroes</h2>
    <div #contentForSvg>
    </div>
  providers:[HeroService],
})
export class HeroesComponent implements OnInit,AfterViewInit {
  @ViewChild('contentForSvg') contentForSvg : ElementRef;

  constructor(private heroservice:HeroService){}

  ngOnInit(): void {

  this.getHeroes();
    $('<div></div>').addClass('plano-map-image').load('/aecid.svg', 
    (index:any,svg:any)=> {
      $("svg > g").each((row_index:any, g:any)=> {
        $(g).attr('row-id',row_index);
        $(g,"> g").children().each((seat_index:any,seat:any)=> {
          //seat
          $(seat).attr("myHighlight","");
        });
      });
    }).appendTo(this.contentForSvg.nativeElement);
  }

  title='Tour of Heros'
  name = 'Windstorm';
  heroes:Hero[];
  selectedHero: Hero;

  getHeroes(): void{
    this.heroservice.getHeroesSlowly().then(
      heroes=> this.heroes=heroes
    );
  }

  onSelect(hero:Hero):void {
    this.selectedHero= hero;
  }

  onCulturalMap():void{
  }
}

我将标签svg添加属性myHighlight，但它不是指令，因为Angular的模板中不存在，它会在事件onInit之后添加。如果我这样做，我该怎么办？希望它是一个指令