滚动视图中的Nativescript iOS HtmlView未调整大小_Ios_Nativescript

滚动视图中的Nativescript iOS HtmlView未调整大小

ios nativescript

滚动视图中的Nativescript iOS HtmlView未调整大小,ios,nativescript,Ios,Nativescript,在过去的几天里，我一直在努力解决这个问题，但我没有找到解决办法。我有一个Nativescript应用程序，它加载存储在webAPI服务器上的文档。这些文档是很长的html文档。因此，我用scrollview包装了HtmlView标记，在这种情况下，WebView将不起作用，因为我需要在滚动的底部放置一些按钮，以便客户签署文档。这在Android上运行良好，但在iOS上，滚动视图不会展开以显示整个内容，直到用户旋转设备。然后它将滚动并查看所有内容 home.component.ts import

在过去的几天里，我一直在努力解决这个问题，但我没有找到解决办法。我有一个Nativescript应用程序，它加载存储在webAPI服务器上的文档。这些文档是很长的html文档。因此，我用scrollview包装了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上

感谢您的帮助。

感谢社区的帮助，我已经解决了这个问题：使用@ViewChild注入元素，然后调用myHtmlView.nativeElement.requestLayout；在设置超时时间内

在类似我的情况下，元素是使用*ngIf隐藏的，如果您还必须等到它可见，如下所示：

@ViewChild('detail') set detail(content: ElementRef) {
    if (content) {
        setTimeout(() => {
            content.nativeElement.requestLayout();
        });
    }
}

为了保持组件更干净，特别是对于共享代码项目，我编写了以下指令：

指令：

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>

你好，你找到解决办法了吗？我也有同样的问题