ScrollView 中的 Nativescript iOS HtmlView 未调整大小答案

【问题标题】：Nativescript iOS HtmlView in ScrollView not resizingScrollView 中的 Nativescript iOS HtmlView 未调整大小
【发布时间】：2018-05-14 20:43:25
【问题描述】：

过去几天我一直在尝试解决这个问题，但我只是没有找到解决方案。我有一个 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。

感谢任何帮助。

【问题讨论】：

您好，您找到解决方法了吗？我也遇到了同样的问题

标签： ios nativescript

【解决方案1】：

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

指令：

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>

【讨论】：

这完全解决了问题。感谢您提供出色的代码@manzapanza

【解决方案2】：

感谢社区的帮助，我已经解决了这个问题：使用@ViewChild 注入元素，然后在setTimeout 中调用myHtmlView.nativeElement.requestLayout();。

如果（像我一样）使用*ngIf 隐藏元素，您还必须等到它可见，如下所示：

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

【讨论】：