동적 HTML 문자열에서 함수 호출

Question

제 애플리케이션에는 동적 HTML을 생성하는 구조가 있습니다. 버튼이 있는 각 사용자 작업에 html 멤버를 추가합니다. 정의된 기능을 이 버튼의 (onclick) 동작에 할당하고 싶습니다. 그런데 제가 즉석에서 생성한 html 문자열에서 버튼을 클릭하면 관련 함수가 정의되지 않았다는 오류가 발생합니다. 나는 무엇을합니까? 내 기능;

returnButtonGroup(키: 문자열):string{
    return '<i onclick="testFunc('' +key + '');" class="fa fa-wrench"></i>'
}
testFunc(키:문자열){
    console.log(키);
}

사용자의 모든 작업에 innerHtml을 사용하여 i 태그를 추가했습니다. 내가 할 수 있는 일에 대한 제안이 있나요? 감사해요.

Answer 1

바인딩된 함수의 범위와 컨텍스트를 고려하는 것이 중요합니다.

귀하의 경우 testFunc 함수는 Angular 구성 요소에 정의되어 있지만 생성된 HTML 문자열의 인라인 onclick 속성에서 호출됩니다. 이로 인해 범위 및 컨텍스트 문제가 발생할 수 있습니다.

Angular에서 동적으로 생성된 HTML의 이벤트와 함수를 올바르게 바인딩하려면 Angular의 이벤트 바인딩 메커니즘을 사용해야 합니다.

returnButtonGroup 함수를 업데이트하여 원시 HTML 문자열 대신 Angular 템플릿 코드를 반환하세요. testFunc 함수를 바인딩하려면 Angular의 (클릭) 이벤트 바인딩을 사용하세요.

으아악

HTML에서 사용

으아악

comment.ts에서 동적으로 생성된 HTML을 보관하는 속성을 만들고 구성 요소 내에서 testFunc 함수에 액세스할 수 있는지 확인하세요.

으아악