Я пытаюсь выяснить, как я могу go передать мой angular компонент в мой шаблон. Прямо сейчас у меня это настроено следующим образом
настройка внутри шаблона
<svg:g [innerHtml]="insertElement()" style="fill:red;"></svg:g>
функция insertElement
//I'm calling DomSanitizer 'sanitize' in my constructor
insertElement(){ return this.sanitize.bypassSecurityTrustHtml(this.DemoElement); }
Переменная DemoElement
DemoElement: string = `<svg:g svg-component x="0" y="190"></svg:g svg-component>`;
До сих пор это рендеринг с размером 0X0 далеко к верхнему левая сторона. Я попытался изменить переменную на <text> элемент, и это сработало. Однако мне пришлось изменить его с обычного синтаксиса, иначе я получил тот же результат.
<!--this is how it has to be when hardcoded into the template-->
<svg:text x="0" y="60">hello hello</svg:text>
<!-- This is how it has to be in the DemoElement variable when passed in through [innerHtml]-->
<text x="0" y="60">hello hello</text>
Видя, что второй пример работает с элементом <text>, я попытался сделать то же самое с моим компонентом.
//I changed this
DemoElement: string =`<svg:g my-component x="0" y="90"></svg:g>`
//into this
DemoElement: string =`<g my-component x="0" y="90"></g>`
ни одна из этих работ не передается в [innerHtml]. У кого-нибудь есть понимание этого?