Как я могу перенести веб-приложение с Angular v7 в мобильное приложение NativeScript

Я сделал простое веб-приложение с 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>
The problem is I do not know how I can do adjust properly the code => Как я могу вам помочь, дайте мне знать? Недавно я работал над несколькими проектами совместного использования кода {NS}.
Narendra 20.05.2019 12:06

@Нарендра Привет! Спасибо за быстрый ответ. После успешного запуска команд добавить @nativescript/schematics и **ng g migrate-component --name= ** для каждого компонента, если я запускаю его на своем мобильном устройстве, он работает, но не отображает соответствующий контент. Теперь я не должен корректировать содержимое каждого файла, который я разместил? Как? Можете ли вы привести пример, используя мой код?

Kathrine Hanson 20.05.2019 12:10

@Нарендра Привет! Можете ли вы также показать мне, как я могу настроить свою форму в погода-search.component.html?

Kathrine Hanson 20.05.2019 13:49

@Narendra, эй, ты создал репозиторий в GitHub, как ты сказал?

Kathrine Hanson 02.07.2019 14:44
1
4
350
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как следует из этого документа, вам необходимо создать файл 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? Можете ли вы привести пример? Спасибо!!

Kathrine Hanson 20.05.2019 12:11

Я добавил пример для вас в ответ. Вы также можете создать образец здесь по адресу play.nativescript.org.

Narendra 20.05.2019 12:14

Большое спасибо! Если у вас есть какие-либо другие источники для миграции, было бы неплохо, если бы вы могли поделиться!!

Kathrine Hanson 20.05.2019 12:16

Конечно, я загружу образец git hub и скоро поделюсь!!

Narendra 20.05.2019 12:17

Можете ли вы создать чат, чтобы я мог поделиться своей проблемой? Я корректирую весь код, как вы мне показали, но он снова показывает автоматически сгенерированные работы!

Kathrine Hanson 20.05.2019 14:08

Убедитесь, что вы используете правильный файл «comp.tns.html», а GridLayout лучше всего подходит для формы, поскольку вы можете определять строки и столбцы.

Narendra 20.05.2019 14:21

Другие вопросы по теме