Angular 9：如何使用 DomSanitizer 顯示帶有數據屬性的 HTML/CSS

Question

因此，應用程序從 API 獲取 HTML 和 CSS：

<div class="top"></div>
        <div class="bottom"></div>

        <div class="header">
            <div class="operator">
                <img src="{{selectedOperator.image}}">
            </div>
            <span class="title">{{headline}}</span>
        </div>

        <div class="bubble">
            {{subhead}}
        </div>

        <div class="btn">
            Подробнее
        </div>

.templ {
            display: flex;
            flex-direction: column;

            background: blue;

            border-top-left-radius: 3rem;
            border-bottom-right-radius: 3rem;

            position: relative;

            padding-bottom: 2rem;

            .top {
                display: block;

                position: absolute;

                top: -3rem;
                right: 0;

                width: 3rem;
                height: 3rem;

                background: blue;

                &:before {
                    content: '';

                    display: block;

                    position: absolute;
                    bottom: 0;
                    right: 0;
                    border-radius: 50rem;

                    background: #fff;

                    height: 6rem;
                    width: 6rem;
                }
            }

            .bottom {
                display: block;

                position: absolute;

                bottom: -3rem;
                left: 0;

                width: 3rem;
                height: 3rem;

                background: blue;

                &:before {
                    content: '';

                    display: block;

                    position: absolute;
                    top: 0;
                    left: 0;
                    border-radius: 50rem;

                    background: #fff;

                    height: 6rem;
                    width: 6rem;
                }
            }

            .header {
                display: flex;
                flex-direction: row;
                align-items: flex-end;

                margin-top: -2rem;

                padding-left: 1rem;
                padding-right: 1rem;

                margin-bottom: 2rem;

                .title {
                    margin-left: 1rem;

                    display: block;

                    color: #fff;
                    font-size: 1.25rem;
                    font-weight: 600;
                    line-height: 1.2;

                    max-width: calc(100% - 1rem);
                }

                .operator {
                    display: block;

                    width: 50%;

                    border-radius: 50rem;

                    padding: 0.5rem;


                    position: relative;
                    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);

                    &:before {
                        content: '';

                        display: block;

                        position: absolute;
                        top: 0;
                        left: 0;
                        z-index: 1;

                        background: linear-gradient(red, blue);

                        width: 100%;
                        height: 100%;
                        border-radius: 50rem;
                    }

                    img {
                        height: 100%;
                        width: 100%;

                        border-radius: 50rem;

                        position: relative;
                        z-index: 2;
                    }
                }
            } // .header

            .bubble {
                display: block;

                background: #fff;
                border-radius: 0.5rem;

                margin-bottom: 0.5rem;

                padding: 0.5rem 1rem;
                line-height: 1.3;

                width: calc(100% - 3rem);

                margin-left: 2rem;
                margin-right: 1rem;

                position: relative;

                &:before {
                    content: '';

                    height: 1rem;
                    width: 1.5rem;

                    display: block;

                    background: #fff;

                    position: absolute;
                    left: -0.5rem;
                    top: 50%;
                    transform: translateY(-50%) rotate(45deg);
                    border-radius: 0.25rem;
                }

                &:last-child {
                    margin-bottom: 0;
                }
            } // .bubble

            .btn {
                display: block;

                width: calc(100% - 2rem);
                margin-left: auto;
                margin-right: auto;

                background: orange;
                box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.5);

                color: black;
                font-size: 1rem;
                font-weight: 500;

                position: absolute;
                bottom: -1rem;
                left: 0;
                right: 0;
            } // .btn
        }

然后應用程序將數據存儲在組件內：

export class AdvertisementComponent implements OnInit {

    templateHtml = here goes html from api
    templateCss = here goes css from api

    headline: string = ''

    constructor(
        private sanitizer: DomSanitizer
    ) {}

    transform(style) {
        return this.sanitizer.bypassSecurityTrustHtml(style)
    }
}

然后應用程序應該呈現它：

    <div class="templ" [innerHtml]="transform(templateHtml)"></div>

所以：在 templateHtml 里面有數據： {{headline}} ， {{subhead}}和{{selectedOperator.image}}

---

問題和疑問：

1. 我需要將 CSS 代碼從 API 添加到 Angular 查看
2. 我需要清理 HTML，但保存動態數據標簽工作

Answer 1

所以，解決方案是：

• 將 html 存儲為字符串
• 用新數據替換字符串
• 重新加載字符串