Nativescript iOS HtmlView в ScrollView без изменения размера - PullRequest
Новая
       12

Nativescript iOS HtmlView в ScrollView без изменения размера

0 голосов
/ 14 мая 2018

Последние несколько дней я пытался решить эту проблему, но просто не могу найти решение.У меня есть приложение Nativescript, которое загружает документы, хранящиеся на сервере webAPI.Эти документы длинные, HTML-документы.Поэтому я обернул тег HtmlView скроллвью (WebView в этом случае не будет работать, так как мне нужно поместить несколько кнопок внизу прокрутки, чтобы клиент подписал документ).Это хорошо работает на Android, но на iOS представление прокрутки не расширяется, чтобы показать весь контент, пока пользователь не повернет свое устройство.Затем он будет прокручивать и просматривать все очень хорошо.

home.component.ts 

import { Component, OnInit } from "@angular/core";
import { DocumentService } from "~/home/service/document.service";
import { IDocument, Document } from "~/home/service/document";
@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {

    constructor(
        private service: DocumentService,) {
        // Use the component constructor to inject providers.
    }

    private document = new Document();
    private text = '';

    ngOnInit() {
        this.text = `<div>Retrieving Document...</div>`;
    }

    ngAfterViewInit(): void {
        this.service.getById('WEB-0000063',3)
                    .then((data: IDocument) => {
                        if (data) {
                            this.document = data;
                            this.text = `<!DOCTYPE><html><body>${this.document.Body}</body></html>`;
                        }
                    });
    }

}

home.component.html 

<GridLayout class="page">
    <GridLayout rows="*" cols="*" height="100%">
        <ScrollView row="0" height="100%">
            <StackLayout height="100%">
                <HtmlView [html]="text"></HtmlView>
            </StackLayout>
        </ScrollView>
    </GridLayout>
</GridLayout>

Если я жестко закодируюданные, он работает нормально, но когда он возвращается с сервера, у него есть проблема, но только на iOS.

Любая помощь приветствуется.

Ответы [ 2 ]

0 голосов
/ 24 июля 2019

Чтобы компонент был более чистым, особенно для проектов с общим кодом, я написал следующую директиву:

Директива: 

import { AfterViewInit, Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appFixHtmlView]',
})
export class FixHtmlViewDirective implements AfterViewInit {
  constructor(private htmlView: ElementRef) {}

  ngAfterViewInit() {
    if (this.htmlView && this.htmlView.nativeElement.ios) {
      setTimeout(() => {
        this.htmlView.nativeElement.requestLayout();
      }, 0);
    }
  }
}

Шаблон: 

<GridLayout rows="* auto">
  <ScrollView row="0">
    <GridLayout rows="*">
      <HtmlView appFixHtmlView [html]="myObject.contentHtml"></HtmlView>
    </GridLayout>
  </ScrollView>

  <StackLayout row="1">
  ... more markup
  </StackLayout>
</GridLayout>
0 голосов
/ 24 июля 2018

Я решил это благодаря помощи сообщества: вставьте элемент с @ViewChild и затем вызовите myHtmlView.nativeElement.requestLayout(); внутри setTimeout.

В случае (как и у меня) элементскрытый с помощью *ngIf, вам также придется подождать, пока он станет видимым, например: 

@ViewChild('detail') set detail(content: ElementRef) {
    if (content) {
        setTimeout(() => {
            content.nativeElement.requestLayout();
        });
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...