本机脚本入门教程2: ActionBarComponent内部错误，但在DI中找不到页面

Question

第一天，我尝试用Angular学习NativeScript，但我无法通过教程的第一部分。使用游乐场，本教程让我复制/粘贴到两个文件中，一个是.ts，另一个在保存/预览时收到错误消息"Inside ActionBarComponent but no Page found in DI“。如果我只是简单地删除ActionBar标记，错误就会消失，然后它就会正常加载。你知道是什么导致了这个错误吗？

来自这里的问题：https://www.reddit.com/r/nativescript/comments/ids8yz/actionbar_error_on_tutorial/

<ActionBar title="My App" class="action-bar"></ActionBar>

<StackLayout>
    <TextField hint="Email Address" keyboardType="email" autocorrect="false"
        autocapitalizationType="none"></TextField>
    <TextField hint="Password" secure="true"></TextField>

    <Button text="Sign i n"></Button>
    <Button text="Sign up for Groceries"></Button>
</StackLayout>

我读到根视图没有被创建，但我个人仍然不理解它。

Answer 1

试着这样做：

1.login.component.html :-

<ActionBar flat="true"
[class]="isIos ? 'action-bar':'action-bar-1'">
<GridLayout columns="*,auto" ios:padding="0 10" height="100%" width="100%">
    <Label col="0" *ngIf="IsActionBarText" [text]="PageTitle" class="action-bar-label"></Label>
    <Ripple col="1" (tap)="openLanguageModalBox()" horizontalAlignment="right" marginRight="20"
        verticalAlignment="center">
        <Image width="25" height="25" src="~/app/images/globe-100.png" tintColor="#ffffff">
        </Image>
    </Ripple>
</GridLayout>
</ActionBar>
<DockLayout stretchLastChild="false" backgroundColor="#ffffff" (tap)="closeKeyBoard()">
<GridLayout rows="*,auto" width="100%" height="100%" class="login-page-background">
    <ScrollView row="0" width="100%" height="100%" orientation="vertical">
        <GridLayout rows="40*, 80*" width="100%" (tap)="closeKeyBoard()" height="100%">
            <GridLayout row="0" class="logo-container">
                <GridLayout verticalAlignment="top" paddingLeft="25" paddingRight="25" paddingTop="30"
                    rows="auto,auto">
                    <Label row="0" color="#ffffff" fontSize="20" [text]="translateText?.projectTitle1"></Label>
                    <Ripple row="1" horizontalAlignment="left" (tap)="openUrl('TechAvidus')">
                        <Label color="#ffffff" fontSize="16" [text]="translateText?.courtesyofTechAvidus"></Label>
                    </Ripple>
                </GridLayout>
            </GridLayout>
            <GridLayout rowspan="2" width="90%" rows="auto" orientation="vertical" verticalAlignment="center"
                [ngClass]="{'login-page-tablet': isTablet}">
                <CardView row="0" elevation="5" radius="50" (tap)="closeKeyBoard()" ios:shadowRadius="20"
                    class="card-view">
                    <GridLayout rows="auto,auto,auto" class="card-container-layout">
                        <GridLayout row="0" rows="*" paddingTop="10" paddingBottom="10" verticalAlignment="center"
                            columns="*,*">
                            <Ripple class="button-layout" row="0" col="0">
                                <GridLayout rows="auto,auto">
                                    <Label row="0" paddingTop="10" paddingBottom="10" color="#000000"
                                        fontWeight="bold" fontSize="18" [text]="translateText?.login"></Label>
                                    <StackLayout row="1" backgroundColor="#fdcb1e" height="1"></StackLayout>
                                </GridLayout>
                            </Ripple>
                            <Ripple (tap)="gotoSignUpPage()" class="button-layout" row="0" col="1">
                                <GridLayout rows="auto,auto">
                                    <Label row="0" paddingTop="10" paddingBottom="10" color="#d3d7da" fontSize="18"
                                        [text]="translateText?.register"></Label>
                                    <!-- <StackLayout row="1" backgroundColor="#fdcb1e" height="1"></StackLayout> -->
                                </GridLayout>
                            </Ripple>
                        </GridLayout>
                        <GridLayout row="1" verticalAlignment="top" rows="*">
                            <PreviousNextView>
                                <GridLayout row="1" class="m-t-10" rows="auto, auto, auto">
                                    <GridLayout row="0" rows="auto">
                                        <GridLayout row="0" columns="auto, *" class="login-container"
                                            ios:style="padding:8">
                                            <Label col="0" text="&#xf0e0;" class="fa set-icon-color"
                                                [ngClass]="{'font-size-lg': !isTablet, 'font-size-lg-tablet': isTablet}"
                                                verticalAlignment="middle" android:style="padding-left: 10"></Label>
                                            <TextField col="1" class="eloha-font-semibold login-field"
                                                hint="Email & Phoneno" ios:style="padding:8"
                                                android:style="padding-left: 10" keyboardType="email"
                                                [(ngModel)]="loginUser.Username" autocorrect="false"
                                                autocapitalizationType="none"
                                                [ngClass]="{'font-size-md': !isTablet, 'font-size-md-tablet': isTablet}">
                                            </TextField>
                                        </GridLayout>
                                    </GridLayout>
                                    <GridLayout row="1" rows="auto" class="m-t-15">
                                        <GridLayout row="0" columns="auto,*, auto" class="login-container"
                                            ios:style="padding:8">
                                            <Label col="0" text="&#xf023;" class="fa set-icon-color"
                                                [ngClass]="{'font-size-lg': !isTablet, 'font-size-lg-tablet': isTablet}"
                                                verticalAlignment="middle" android:style="padding-left: 10"></Label>
                                            <TextField #password col="1" class="eloha-font-semibold login-field"
                                                hint="Password" android:style="padding-left: 10"
                                                secure="true" [(ngModel)]="loginUser.Password" ios:style="padding:8"
                                                [ngClass]="{'font-size-md': !isTablet, 'font-size-md-tablet': isTablet}">
                                            </TextField>
                                            <Label col="2" [text]="showHideIcon" class="fa show-hide-icon"
                                                [ngClass]="{'font-size-lg': !isTablet, 'font-size-lg-tablet': isTablet}"
                                                (tap)="showHidePassword()" verticalAlignment="middle"
                                                android:style="padding-right: 10"></Label>
                                        </GridLayout>
                                    </GridLayout>
                                    <GridLayout orientation="horizontal" row="2" rows="*,*" paddingLeft="5"
                                        class="p-t-20">
                                        <Ripple (tap)="rememberMeDetail()" horizontalAlignment="center" row="0">
                                            <GridLayout horizontalAlignment="center" rows="auto" columns="auto,*">
                                                <Label col="0" paddingTop="3" verticalAlignment="center"
                                                    class="fa eloha-font-semibold" color="#cfd8df"
                                                    [text]="isRememberMe ? '&#xf14a;':'&#xf096;'"
                                                    [ngClass]="{'font-size-lg': !isTablet, 'font-size-lg-tablet': isTablet}"></Label>
                                                <Label col="1" paddingLeft="5" verticalAlignment="center"
                                                    class="eloha-font-semibold" color="#cfd8df"
                                                    text="Remember Me"
                                                    [ngClass]="{'font-size-lg': !isTablet, 'font-size-lg-tablet': isTablet}"></Label>
                                            </GridLayout>
                                        </Ripple>
                                        <Ripple horizontalAlignment="center" row="1"
                                            (tap)="gotoForgotPasswordPage()">
                                            <Label class="eloha-font-semibold" paddingTop="10" color="#cfd8df"
                                                text="Forgot password"
                                                [ngClass]="{'font-size-lg': !isTablet, 'font-size-lg-tablet': isTablet}"></Label>
                                        </Ripple>
                                    </GridLayout>
                                </GridLayout>
                            </PreviousNextView>
                        </GridLayout>
                        <GridLayout row="2" rows="*" marginTop="5" marginBottom="5" horizontalAlignment="center"
                            orientation="horizontal">
                            <CardView row="0" width="auto" [width]="isIos ? '30%':'auto'" shadowOpacity="0"
                                height="70" class="card-view">
                                <!--Android-->
                                <Ripple *ngIf="!isIos" (tap)="submitLogin()">
                                    <Button row="0" class="eloha-font-semibold login-submit"
                                        [text]="translateText?.login"
                                        [ngClass]="{'font-size-lg': !isTablet, 'font-size-lg-tablet': isTablet}"></Button>
                                </Ripple>
                                <!--iOS-->
                                <Button *ngIf="isIos" row="0" class="eloha-font-semibold login-submit"
                                    (tap)="submitLogin()" [text]="translateText?.login"
                                    [ngClass]="{'font-size-lg': !isTablet, 'font-size-lg-tablet': isTablet}"></Button>
                            </CardView>
                        </GridLayout>
                    </GridLayout>
                </CardView>
            </GridLayout>
        </GridLayout>
    </ScrollView>
</GridLayout>
</DockLayout>

2.login.component.css:-

 .action-bar {
   background-color: #af152d;
   color: #FFFFFF;
 }

 .action-bar-1 {
   background-image: url('~/app/images/bg-app.jpg');
   background-repeat: no-repeat;
   color: #FFFFFF;
 }

.action-bar-label {
   font-size: 20;
   horizontal-align: left;
   vertical-align: center;
   color: white;
 }

.login-page-background {
  background-image: url('~/app/images/bg-2.png');
}

.copyright-label {
  text-align: center;
  opacity: .6;
  color: #000000;
}

 .card-view {
  background-color: #fff;
 }

.card-container-layout {
  padding-left: 20;
  padding-right: 20;
}

.login-container {
  color: #000000;
  border-width: 1;
  border-radius: 30;
  padding-top: 5;
  padding-bottom: 5;
  border-color: #ececec;
  background-color: #FFFFFF;
  vertical-align: middle;
}

.login-field {
  color: #000000;
  border-bottom-width: 1;
  border-bottom-color: transparent;
  placeholder-color: rgba(16, 50, 65, .45);
  vertical-align: middle;
}

.login-submit {
  margin: 5;
  border-width: 1;
  border-radius: 100%;
  border-color: #af152d;
  background-color: #af152d;
  color: white;
  text-transform: none;
}

.logo-container {
  background-image: url('~/app/images/bg-app.jpg');
  background-repeat: repeat;
}

.set-icon-color {
color: #adb7b9;
}

.show-hide-icon {
  color: rgba(12, 3, 148, 0.45);
}

.login-page-tablet {
  width: 60%;
}

.button-layout {
 width: 100%;
 text-align: center;
}

.button-bottom-layout {
 width: 100%;
 border-right-width: 0.5;
 border-right-color: #cfd8df;
 text-align: center;
}

3.login.component.ts:-

import { Component, OnInit, ViewChild, ElementRef, NgZone, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef } from "@angular/core";
import { LoginUser } from "./sign-in-model";
import { Page } from "tns-core-modules/ui/page";
import { DeviceType } from "tns-core-modules/ui/enums";
import * as frameModule from "tns-core-modules/ui/frame";
import { isIOS, device } from "tns-core-modules/platform";
import * as  orientation from 'nativescript-orientation';
import * as dialogs from "tns-core-modules/ui/dialogs";
import { TextField } from "tns-core-modules/ui/text-field";
import { RouterExtensions } from "nativescript-angular/router";
import { UtilityComponent } from "~/core/utility";
import { TNSFancyAlert, TNSFancyAlertButton } from "nativescript-fancyalert";
import { LoadingIndicator } from "@nstudio/nativescript-loading-indicator";
import { SignInService } from "./sign-in-service";
import * as appSettings from "tns-core-modules/application-settings";
import * as utilModule from "tns-core-modules/utils/utils";
import InAppBrowser from 'nativescript-inappbrowser';
import { AuthService } from "~/core/auth.service";
import { LanguageModalComponent } from "~/app/common-layout/language-modal/language-modal.component";

@Component({
selector: "SignIn",
moduleId: module.id,
templateUrl: "./sign-in.component.html",
styleUrls: ['./sign-in.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SignInComponent implements OnInit, AfterViewInit {

@ViewChild(LanguageModalComponent, { static: false }) languageChild: LanguageModalComponent;

@ViewChild('password', { static: false }) passwordField: ElementRef;
public isRememberMe: boolean = false;
public isTablet: boolean = false;
public isIos: boolean = false;
public loadingIndicator: any;
public loginUser: LoginUser;
public translateText: any;

//For Password textfiled
public showHideIcon: any;
private showPassword = false;
public hideIcon = String.fromCharCode(0xf070);
public showIcon = String.fromCharCode(0xf06e);

constructor(private page: Page,
    private zone: NgZone,
    private _ref: ChangeDetectorRef,
    private authService: AuthService,
    private routerExtensions: RouterExtensions,
    private signInService: SignInService) {
    this.loadingIndicator = new LoadingIndicator();
    this.isIos = isIOS;
    this.isTablet = device.deviceType === DeviceType.Tablet;
    // this.page.actionBarHidden = true;
    this.loginUser = new LoginUser();
    this.showHideIcon = this.hideIcon;
}

ngOnInit(): void {
    this.changeLabelLanguage(appSettings.getString("language"), true);
    orientation.setOrientation("portrait");
    orientation.disableRotation();

    this.getUsernameAndPassword();
}

ngAfterViewInit(): void {
    if (isIOS) {
        const controller = frameModule.topmost().ios.controller;
        // get the view controller navigation item
        const navigationItem = controller.visibleViewController.navigationItem;
        // hide back button
        navigationItem.setHidesBackButtonAnimated(true, false);
    }
}

//Already fill with username and password
getUsernameAndPassword() {
    if (appSettings.getString('Username') && appSettings.getString('Password')) {
        this.loginUser.Username = appSettings.getString('Username');
        this.loginUser.Password = appSettings.getString('Password');
        this.isRememberMe = true;
    } else {
        this.isRememberMe = false;
    }
}

//Password textfiled input hide and show
showHidePassword() {
    this.showPassword = !this.showPassword;
    this.showHideIcon = this.showPassword ? this.showIcon : this.hideIcon;
    let passField: TextField = this.passwordField.nativeElement;
    passField.secure = !passField.secure;
}

//Remember me
rememberMeDetail() {
    if (this.loginUser.Username != undefined && this.loginUser.Password != undefined) {
        appSettings.setString('Username', this.loginUser.Username);
        appSettings.setString('Password', this.loginUser.Password);
    }

    this.isRememberMe = !this.isRememberMe;
}

//Login account
submitLogin() {
    if (!isIOS) utilModule.ad.dismissSoftInput();
    if (this.loginUser.Username == null || this.loginUser.Username == "") {
        return this.showError("Email/Phone number is required");
    } else if (this.loginUser.Password == null || this.loginUser.Password == "") {
        return this.showError("Password is required");
    } else if (this.loginUser.Username.length > 0 && this.loginUser.Password.length > 0) {
        this.loadingIndicator.show();
        this.signInService.login(this.loginUser).subscribe(
            data => {
                this.loadingIndicator.hide();
                    this.gotoDashboardPage();
                }
            },
            error => {

                console.log(error);
                this.loadingIndicator.hide();
                this.showError(error.error);
            },
            () => {
                this.loadingIndicator.hide();
            }
        );
    }
}

//Go to dashboard page
gotoDashboardPage() {
    setTimeout(() => {
        this.zone.run(() => {
            this.routerExtensions.navigate(["dashboard"], {
                clearHistory: true
            });
        });
    }, 100);
}

//Go to forgot password page
gotoForgotPasswordPage() {
    setTimeout(() => {
        this.zone.run(() => {
            this.routerExtensions.navigate(["forgotpassword"], {
                clearHistory: (isIOS) ? true : false,
            });
        });
    }, 100);
}

//Go to sign up page
gotoSignUpPage() {
    setTimeout(() => {
        this.zone.run(() => {
            this.routerExtensions.navigate(["signup"], {
                clearHistory: (isIOS) ? true : false,
            });
        });
    }, 100);
}

//Fancy alert success message
public showSuccess(successMessage) {
    TNSFancyAlert.showSuccess(
        "Success!",
        successMessage,
        "Ok!"
    );
}

//Fancy alert error message
public showError(errorMessage) {
    TNSFancyAlert.showError(
        "Error!",
        errorMessage,
        "Ok!"
    );
}

}