Угловая 2: Используйте (нажмите), чтобы вызвать функцию в службе

Question

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

У меня есть следующий HTML:

<a (click)="SellingVarietiesService.goToVarietyDetails(3)">Test</a> 

Вот код для функции Я хочу, чтобы вызвать:

@Injectable() 
export class SellingVarietiesService {  

    constructor(private http: Http) { } 

    public goToVarietyDetails(varietyId: any): void {   
     console.log(varietyId); 
    } 
} 

HTML, генерируется с помощью .NET/C# и вернулся из HTTP-вызов в службе, которую я создал. Можно ли вызвать эту функцию в моей службе с помощью HTML, который возвращается мне? У меня просто неправильный синтаксис?

EDIT:

Я использовал DomSanitizer на HTML, что я вернулся (в HTML, который содержит (нажать) функцию). Вот код из моего компонента, который использовал его:

// Get Variety List 
getVarietyList() {   
    this.sellingMenuService.getVarieties().subscribe(res => {    
     this.varietyListSelling = this.sanitizer.bypassSecurityTrustHtml(res); 
    }); 
} 

А вот HTML, где что получает размещены:

<div *ngIf="varietyListSelling" [innerHtml]="varietyListSelling"></div> 

Вот пример из того, что res может выглядеть следующим образом:

<div class="varietyName"> 
    <a class="" (click)="sellingVarietiesService.goToVarietyDetails(1176)" >Starbor</a> 
    <a href="#deleteVarietySelling" id="deleteVarietySelling_1176" class="quick-delete fa-minus-button" title="Delete" data-toggle="modal"> 
     <i class="fa fa-minus"></i> 
    </a> 
</div> 

Answer 1

Вам необходимо ввести услугу в компонент, который содержит ваш html

@Component({ 
    template: `<a (click)="svs.goToVarietyDetails(3)">Test</a>` 
}) 
export class MyComponent { 
    constructor(public svs: SellingVarietiesService) {} 
} 

Затем вы можете получить к нему доступ через свойство компонента.