角度2及びリーフレットキャッチされないにReferenceError：<function>は私はリーフレットと角度2でプロジェクトを持っているHTMLButtonElement.onclick

Question

で定義されていない、私はボタンをクリックすることで、簡単な関数を呼び出すしたいと思いますが、私は

ReferenceError: <function> is not defined at HTMLButtonElement.onclick 

を取得します

ここに私のコードです。すべてが機能しますが、機能はありません。

export class MapComponent implements OnInit { 

//layer 
    googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{ 
    maxZoom: 30, 
    subdomains:['mt0','mt1','mt2','mt3'] 
    }); 
//!!!The FUNCTION 
    test() { 
    console.log('test'); 
    } 
constructor() {} 

ngOnInit() { 
    this.ParseService.getJ().subscribe(data => { 
    this.myData = JSON.parse(data); 

//set markers and popUps 
for(let i = 0; i < this.myData.length; i++) { 
    let lat =+((this.myData[i])['lat']); 
    let lng =+((this.myData[i])['lng']); 
    this.id = (this.myData[i])['code']; 

//HERE IS THE PROBLEM. BUTTON APPEARS BUT FUNCTION IS NOT AVAILABLE 
     let popUp = (this.myData[i])['displayName'] + 
     '<br/><button onclick="test">Raumplan</button>'; 

    let markerLocation = L.latLng(lat, lng); 
    let marker = new L.Marker(markerLocation, {icon: customIcon}); 
    map.addLayer(marker); 
    marker.bindPopup(popUp); 
} 
    }); 

回避策を教えてください。

Answer 1

あなたはこのようなイベントをバインドしますangular2中：

let popUp = (this.myData[i])['displayName'] + 
    '<br/><button (click)="test">Raumplan</button>'; 

ORこの：

let popUp = (this.myData[i])['displayName'] + 
    '<br/><button on-click="test">Raumplan</button>'; 

Answer 2

それはHTMLだとあなたがonclickに割り当てる機能がで検索されるようonclickを使用しないでくださいグローバルscopeはjavascriptです。つまり、<script>タグ内にあり、これはもはやAngular2の部分ではありません。それでは、あなたは試してみてくださいすることは

import {Component} from '@angular/core'; 
@Component({ 
selector: 'dynamic-button', 
template: '<button type="button" (click)="test()">Raumplan</button>' 
}) 

export class DynamicButton{ 
public test(): void{ 
alert("Hi. I am a test call"); 
    } 
} 

そして

let popUp = (this.myData[i])['displayName'] + 
'<br/><dynamic-button></dynamic-button>'; 

以下のようなものです