>

컴포넌트에서 동적 HTML을 생성하고 있지만 일반적인 이온 스타일이 작동하지 않습니다.

html :

<div [innerHTML]="testHtml"> </div>

컴포넌트 (ts)에서

public testHtml = "<button color='secondary' ion-button>Default</button>";

파이프를 사용하여 HTML을 신뢰하려고 시도했지만 인라인 스타일로만 작동합니다.

파이프에서 :

this.sanitizer.bypassSecurityTrustHtml(html);

  • 답변 # 1

    이 문제는 '이온 버튼'이 알려진 요소가 아님을 나타내는 이온 버튼과 동일합니다

    이온은 앵귤러 위에있는 프레임 워크이기 때문에 앵귤러는 innerHTML을 추가하기 전에 파싱이 발생하기 때문에 이온 사용자 정의 요소를 구문 분석하거나 올바른 CSS를 적용 할 수 없습니다.

    따라서 innerHTML 내에서요소를 만들지 마십시오.  지령. innerHTML 의 사용법을 보자  텍스트 형식을 유지하십시오.

    Angular는 html 요소를 html 템플릿 (.html 파일 또는 템플릿 : 속성)에 넣습니다. innerHTML 내부에 HTML을 만들고 싶을 때 html 파일에 html 파일을 배치하고 [ngIf] 지시문을 배치하여 요소를 표시하거나 숨기거나 [ngClass] 지시문을 사용하여 요소에 대한 특정 클래스.

    <div>
        <button [ngIf]="someTrueCondition; else showTheOtherElement" color='secondary' ion-button>Default</button>
        <ng-template #showTheotherElement>
            <button  color='primary' ion-button>Default</button>
        </ng-template>
    </div>
    
    

  • 답변 # 2

    Angular는 동적으로 추가 된 모든 HTML을 삭제합니다.

    솔루션은 간단했습니다-파이프 사용하기

    import {Pipe, PipeTransform} from '@ angular/core'; "@ angular/platform-browser"에서 {DomSanitizer} 가져 오기;

    @Pipe({
      name: 'safeHtml',
    })
    export class SafeHtmlPipe implements PipeTransform {
      constructor(private sanitizer:DomSanitizer){}
      transform(html) {
        return this.sanitizer.bypassSecurityTrustHtml(html);
      }
    }
    
    

    innerHTML 태그를 사용하여 파이프 추가

    <div [innerHTML]="question | safeHtml"></div>
    
    

    여기에서 작동하십시오.

  • 이전 Mysql 57의 JSON_OBJECT 기능
  • 다음 javascript - 모바일에서 모바일 장치로 consolelog 출력을 얻으려면 어떻게해야합니까?