问题描述
我使用Angular v7制作了一个简单的Web应用程序,并希望将其迁移到NativeScript移动应用程序中.
I made a simple web app with Angular v7 and I want to migrate it to a NativeScript mobile app .
我按照 https:中的说明进行操作: //docs.nativescript.org/angular/code-sharing/migrating-a-web-project#migrating-components ,但我遇到了困难.
I followed the instructions in https://docs.nativescript.org/angular/code-sharing/migrating-a-web-project#migrating-components but I am facing a difficulty.
该应用程序正在我的Android手机上运行,但未显示内容,因为我需要针对移动应用程序进行适当调整.它显示自动生成的作品.问题是我不知道如何找到合适的文档,因此我不知道如何正确调整代码.有帮助吗?
The app is running in my Android mobile phone but it does not show the content because I need to adjust it properly for a mobile app. It shows auto-generated works. The problem is I do not know how I can do adjust properly the code since I cannot find a properly doc. Any help?
我在 app.component.html 中的代码:
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div>
<weather-search></weather-search>
<weather-list></weather-list>
<router-outlet></router-outlet>
我在 weather-search.component.html 中的代码:
<section class="weather-search">
<form (ngSubmit)="onSubmit(f)" #f="ngForm">
<div class="test_up">
<label for="city" class="city">City</label>
<input name="location" type="text" id="city" ngModel required>
</div>
<div class="test_down">
<label for="countryCode" class="city">Country Code</label>
<input name="countryCode" type="text" id="code" ngModel required>
</div>
<button type="submit">Add City</button>
</form>
<button (click)="onClickLocationData(f)">Get geolocation</button>
<label for="latitude" class="map" *ngIf="latitude!=0">Latitude: {{latitude}} </label>
<label for="longitude" class="map" *ngIf="longitude!=0">Longitude: {{longitude}} </label>
<div id="map" class="mapLocation"></div>
</section>
我在 weather-list.component.html 中的代码:
<section class="weather-list">
<weather-item *ngFor="let weatherItem of weatherItems" [item]="weatherItem"></weather-item>
</section>
我在 weather-item.component.html 中的代码:
<article class="weather-element">
<div class="col-1">
<h3>{{ weatherItem.cityName }}</h3>
<p class="info">{{ weatherItem.description }}</p>
</div>
<div class="col-2">
<span class="temperature">{{ weatherItem.temperature }}°C</span>
</div>
</article>
推荐答案
正如该文档所建议的那样,您必须创建component.tns.html文件,因为其他HTML元素不可用于移动设备.
As that document suggests as well, you have to create component.tns.html file as and other HTML elements are not available for mobile.
在.tns.html文件中,您可以用StackLayout或GridLayout替换.您可以参考 https://www.nslayouts.com/了解有关{NS}布局的更多信息.
In your .tns.html file, you can replace with either StackLayout or GridLayout. You can refer to https://www.nslayouts.com/ to learn more about {NS} layouts.
在您的 weather-list.component.tns.html 中:
<StackLayout class="weather-list">
<weather-item *ngFor="let weatherItem of weatherItems" [item]="weatherItem"></weather-item>
</StackLayout >
和 weather-item.component.tns.html
<StackLayout class="weather-element">
<StackLayout>
<Label text="{{ weatherItem.cityName }}"></Label>
<Label text="{{ weatherItem.description }}"></Label>
</StackLayout>
<StackLayout>
<Label text="{{ weatherItem.temperature }}"></Label>
</StackLayout>
</StackLayout>
这篇关于如何将具有Angular v7的Web应用程序迁移到移动NativeScript应用程序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!