Я сделал простое веб-приложение с Angular v7 и хочу перенести его в мобильное приложение NativeScript.
Я следовал инструкциям в https://docs.nativescript.org/angular/code-sharing/migrating-a-web-project#migrating-components, но столкнулся с трудностью.
Приложение работает на моем мобильном телефоне Android, но оно не отображает содержимое, потому что мне нужно правильно настроить его для мобильного приложения. Он показывает автоматически сгенерированные работы. Проблема в том, что я не знаю, как мне правильно настроить код, так как я не могу найти правильный документ. Любая помощь?
Мой код в 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>
Мой код в погода-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>
Мой код в погода-list.component.html:
<section class = "weather-list">
<weather-item *ngFor = "let weatherItem of weatherItems" [item] = "weatherItem"></weather-item>
</section>
Мой код в погода-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>
@Нарендра Привет! Спасибо за быстрый ответ. После успешного запуска команд добавить @nativescript/schematics и **ng g migrate-component --name= ** для каждого компонента, если я запускаю его на своем мобильном устройстве, он работает, но не отображает соответствующий контент. Теперь я не должен корректировать содержимое каждого файла, который я разместил? Как? Можете ли вы привести пример, используя мой код?
@Нарендра Привет! Можете ли вы также показать мне, как я могу настроить свою форму в погода-search.component.html?
@Narendra, эй, ты создал репозиторий в GitHub, как ты сказал?
Как следует из этого документа, вам необходимо создать файл component.tns.html, поскольку другие элементы HTML недоступны для мобильных устройств.
В файле .tns.html вы можете заменить его на StackLayout или GridLayout. Вы можете обратиться к https://www.nslayouts.com/, чтобы узнать больше о макетах {NS}.
в вашем погода-list.component.tns.html:
<StackLayout class = "weather-list">
<weather-item *ngFor = "let weatherItem of weatherItems" [item] = "weatherItem"></weather-item>
</StackLayout >
и в погода-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>
Как насчет самодельных компонентов, таких как <weather-item> в погода-list.component.html? Можете ли вы привести пример? Спасибо!!
Я добавил пример для вас в ответ. Вы также можете создать образец здесь по адресу play.nativescript.org.
Большое спасибо! Если у вас есть какие-либо другие источники для миграции, было бы неплохо, если бы вы могли поделиться!!
Конечно, я загружу образец git hub и скоро поделюсь!!
Можете ли вы создать чат, чтобы я мог поделиться своей проблемой? Я корректирую весь код, как вы мне показали, но он снова показывает автоматически сгенерированные работы!
Убедитесь, что вы используете правильный файл «comp.tns.html», а GridLayout лучше всего подходит для формы, поскольку вы можете определять строки и столбцы.
The problem is I do not know how I can do adjust properly the code
=> Как я могу вам помочь, дайте мне знать? Недавно я работал над несколькими проектами совместного использования кода {NS}.