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

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

1 голос
/ 20 мая 2019

Я создал простое веб-приложение для 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>

Мой код в 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>

1 Ответ

1 голос
/ 20 мая 2019

Как и в этом документе, вы должны создать файл component.tns.html, так как другие HTML-элементы недоступны для мобильных устройств.

В вашем файле .tns.html вы можете заменить либоStackLayout или GridLayout.Вы можете обратиться к https://www.nslayouts.com/, чтобы узнать больше о макетах {NS}.

в вашем 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>
...