如何解决本机脚本入门教程2：ActionBarComponent内部错误，但在DI中找不到页面
尝试使用Angular学习NativeScript的第一天，我无法超越本教程的第一部分。在操场上，本教程将我复制/粘贴到两个文件中，一个是.ts，另一个是.html，在保存/预览时，我收到错误消息“ Inside ActionBarComponent但在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>
我了解到没有创建根视图，但我个人仍然不了解它。
解决方法
尝试以下操作：-
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">
<GridLayout row="0" rows="auto">
<GridLayout row="0" columns="auto,*" class="login-container"
ios:style="padding:8">
<Label col="0" text="" 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="" 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 ? '':''"
[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"],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!"
);
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。