Ошибка NativeScript - пустое приложение отображается вместо содержимого - PullRequest
Новая
       18

Ошибка NativeScript - пустое приложение отображается вместо содержимого

0 голосов
/ 21 мая 2019

Я создал веб-приложение с Angular v7 и теперь хочу перенести свое веб-приложение в мобильное приложение NativeScript.Я следовал инструкции с официального сайта NativeScript, и все работало идеально, пока я не настроил свой код для мобильного приложения.

Когда я сейчас запускаю свое приложение на своем мобильном устройстве Android, я получаю сообщение об ошибке

Представление не добавлено в этот экземпляр. Laylayout (2), CurrentParent undefned, ExpectedParent: AppHostView (1)

, а иногда я просто вижу пустое приложение.Что я делаю неправильно?Извините, но я новичок в области миграции и совместного использования кода.

My app.component.tns.html : 

<!-- https://docs.nativescript.org/angular/core-concepts/angular-navigation.html#page-router-outlet -->
<StackLayout class="text-align:center">
    <Label>
      Welcome to {{ title }}!
    </Label>
</StackLayout>
<weather-search></weather-search>
<weather-list></weather-list>
<page-router-outlet></page-router-outlet>

My weather-list.component.tns.html : 

<StackLayout class="weather-list">
  <weather-item *ngFor="let weatherItem of weatherItems" [item]="weatherItem"></weather-item>
</StackLayout>

<!--
Original Web template:

<section class="weather-list">
    <weather-item *ngFor="let weatherItem of weatherItems" [item]="weatherItem"></weather-item>
</section>
-->

My weather-search.component.tns.html : 

<FlexboxLayout class="weather-search">
    <StackLayout class="test_up">
        <Label class="city" text="City"></Label>
        <TextField name="location" id="city" ngModel required></TextField>
    </StackLayout>
    <StackLayout class="test_down">
        <Label class="city" text="Country Code"></Label>
        <TextField name="countryCode" id="code" ngModel required></TextField>
        <Button text="Add City" (tap)="onSubmit(f)"></Button>
    </StackLayout>
</FlexboxLayout>
<Button text="Get geolocation" (tap)="onClickLocationData(f)"></Button>
<Label class="map" *ngIf="latitude!=0" text="{{latitude}}"></Label>
<Label class="map" *ngIf="longitude!=0" text="{{longitude}}"></Label>
<StackLayout id="map" class="mapLocation"></StackLayout>

<!--
Original Web template:

<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>
-->

My weather-item.component.tns.html : 

<StackLayout class="weather-element">
    <StackLayout class="col-1">
        <Label text="{{ weatherItem.cityName }}"></Label>
        <Label class="info" text="{{ weatherItem.description }}"></Label>
    </StackLayout>
    <StackLayout class="col-2">
        <Label class="temperature" text="{{ weatherItem.temperature }}"></Label>
    </StackLayout>
</StackLayout>

<!--
Original Web template:

<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>
-->

My app-routing.module.tns.ts : 

import { NgModule } from '@angular/core';
import { NativeScriptRouterModule } from 'nativescript-angular/router';
import { Routes } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [NativeScriptRouterModule.forRoot(routes)],
  exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

1 Ответ

0 голосов
/ 21 мая 2019

Ваш app.component.html не может иметь более одного элемента пользовательского интерфейса.Вы должны обернуть его макетом по вашему выбору.

...