Блог

Главная - Вопросы по программированию - Визуализация компонента в автоматически созданном HTML-элементе -Angular 8

Визуализация компонента в автоматически созданном HTML-элементе -Angular 8

#javascript #angular #canvas

#javascript #angular #холст

Вопрос:

У меня есть шаблон angular test.component.html

 <div class="container1" *ngIf="notSigned">
  <div class="div-msg wrap" [outerHTML]="htlDoc | safe: 'html'">
     
  </div>
</div>

и test.component.ts =>

 
import htmldemo from '../../assets/htmldemo.json';

@Component({

  selector: 'app-sign',

  templateUrl: './test.component.html',

  styleUrls: ['./test.component.scss'],

  encapsulation: ViewEncapsulation.None

})

export class TestComponent implements OnInit {

  htlDoc: string = '';

  ngOnInit(): void {

    this.htlDoc = "<div class="canvas-wrapper" id="divSignpad3"><ng-signature-pad id="signPad3" [responsive]="true" [height]="200" placeholder="Hello" doneButtonText="Accept"clearButtonText="Clear"  format="base64" doneButtonClass="act-btn" clearButtonClass="act-btn" penColor="navy" (cleared)="ClearSignature($event,'divSignpad3')"rn                              (done)="OnSign($event,'divSignpad3')"> </ng-signature-pad></div>"

    
  }

}

Но после запуска приложения signature-pd не отображается.Проблема в том, что компонент не отображается, если я напрямую добавляю в DOM (используя innerHTML)

Комментарии:

1. Какая-либо ошибка в консоли? Если представление ведет себя не так, как ожидалось, высока вероятность того, что Angular жалуется на что-то в консоли.

2. Ошибки нет, синтаксис dom-панели подписи отображается на странице вместо рендеринга в виде панели подписи, <div class=»canvas-wrapper» id=»divSignpad1″>заполнитель = «Привет» donebuttontext=»Принять» clearbuttontext =»Очистить» format =»base64″ donebuttonclass=»act-btn» clearbuttonclass=»act-btn» pencolor =»navy» (очищено)=»ClearSignature($event,’divSignpad1′)» (готово) =»OnSign($event,’divSignpad1′)»> </ng-signature-pad> </div>

3. Пожалуйста, отредактируйте свой первоначальный вопрос, если вы хотите добавить информацию или форматированный код.

4. Кроме того, что насчет [innerHTML] ?

5. Я вижу, вы пытаетесь визуализировать угловой элемент ng-signature-pad . Это просто не сработает. Это будет работать, только если вы создали веб-компонент с тегом ‘ng-signature-pad’. реализация этого просто не стоит усилий. Попробуйте просто записать весь html внутри вашего шаблона