Привет, я новичок в angular 7 и ionic 4. Как вы управляете переменными на странице панели управления с другой страницы ?.
Я попытался создать простую логику в своем приложении. Контролируйте tbFor с помощью функции setToolbar на dashboard.page.ts из landing-in.page.ts, но это не работает. и появляется ошибка
(ERROR Error: Uncaught (in promise): Error: StaticInjectorError (AppModule) [LandingInPage -> DashboardPage] :).
но эта проблема может быть потеряна, когда я пытаюсь импортировать dashboard.page.ts в app.module.ts и добавить его к поставщикам. но когда я запускаю его и выдаю console.log, setToolbar приводит к «true», но факт заключается в том, что при загрузке страницы значения экземпляра переменная tbFor по-прежнему имеет значение «false».
это пример dashboard.page.ts
import { Component, OnInit } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { MenuController } from "@ionic/angular";
import { AuthService } from "../services/auth/auth.service";
@Component({
selector: "app-dashboard",
templateUrl: "./dashboard.page.html",
styleUrls: ["./dashboard.page.scss"]
})
export class DashboardPage implements OnInit {
tbFor = {
divCS: false,
divGA: false,
divTC: false
};
constructor(
public router: Router,
public menu: MenuController,
private authService: AuthService
) {
this.initializeApp();
}
initializeApp() {
this.menu.enable(true, "sideMenu");
}
setToolbar(div) {
if (div == "CS") {
this.tbFor.divCS = true;
} else if (div == "GA") {
this.tbFor.divGA = true;
} else if (div == "TC") {
//Ignores
this.tbFor.divTC = false;
}
}
clearToolbar() {
this.tbFor.divCS = false;
this.tbFor.divGA = false;
this.tbFor.divTC = false;
}
}
это dashboard.page.html
<ion-header>
<ion-toolbar class="ion-toolbar" color="primary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>
Semua Dokumen
</ion-title>
</ion-toolbar>
<app-toolbar-cs *ngIf="tbFor.divCS"></app-toolbar-cs>
<app-toolbar-ga *ngIf="tbFor.divGA"></app-toolbar-ga>
</ion-header>
<ion-content>
<ion-list lines="none" *ngFor="let doc of docs">
<ion-item>
<img src="../../assets/img/box-skeleton.png" class="doc-icon" slot="start">
<ion-label class="doc-label" text-wrap>{{doc.title}}<br><small class="doc-date">{{doc.date}}</small></ion-label>
<ion-badge slot="end">{{doc.badge}}</ion-badge>
</ion-item>
</ion-list>
<div class="ion-tabcam">
<div class="ion-tabcam-icon">
<span class="mdi mdi-camera"></span>
</div>
</div>
</ion-content>
это посадка-in.page.ts
import { Component, OnInit } from "@angular/core";
import { Storage } from "@ionic/storage";
import { Router } from "@angular/router";
import { AuthService } from "../services/auth/auth.service";
import { AppComponent } from "../app.component";
import { DashboardPage } from "../dashboard/dashboard.page";
@Component({
selector: "app-landing-in",
templateUrl: "./landing-in.page.html",
styleUrls: ["./landing-in.page.scss"]
})
export class LandingInPage implements OnInit {
landingLoggedButton: boolean = false;
landingSpinner: boolean = true;
constructor(
private storage: Storage,
private router: Router,
private authService: AuthService,
private appComponent: AppComponent,
private dashboard: DashboardPage
) {}
setLandingLoggedButton(value: boolean) {
this.landingLoggedButton = value;
}
setLandingSpinner(value: boolean) {
this.landingSpinner = value;
}
ngOnInit() {
this.sessionCheck();
}
delay(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async sessionCheck() {
await this.authService.checkLoggedIn();
await this.delay(2000);
if (this.authService.isLoggedIn == true) {
this.appComponent.setSidebar(this.authService.getDivision);
this.appComponent.setAvatar(this.authService.getAvatar);
this.appComponent.setFullname(this.authService.getFullname);
this.appComponent.setEmail(this.authService.getEmail);
this.dashboard.setToolbar(this.authService.getDivision); <-- look this
this.router.navigate(["/dashboard"]);
} else {
this.landingSpinner = false;
this.landingLoggedButton = true;
}
}
}
а это мой app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpClientModule } from "@angular/common/http";
import { RouteReuseStrategy } from "@angular/router";
import { IonicModule, IonicRouteStrategy } from "@ionic/angular";
import { SplashScreen } from "@ionic-native/splash-screen/ngx";
import { StatusBar } from "@ionic-native/status-bar/ngx";
import { AppComponent } from "./app.component";
import { MenuCsComponent } from "./components/menu/menu-cs/menu-cs.component";
import { MenuGaComponent } from "./components/menu/menu-ga/menu-ga.component";
import { MenuTcComponent } from "./components/menu/menu-tc/menu-tc.component";
import { AppRoutingModule } from "./app-routing.module";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { IonicStorageModule } from "@ionic/storage";
import { DashboardPage } from "./dashboard/dashboard.page";
@NgModule({
declarations: [
AppComponent,
MenuCsComponent,
MenuGaComponent,
MenuTcComponent
],
entryComponents: [],
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
IonicModule.forRoot(),
AppRoutingModule,
IonicStorageModule.forRoot({
name: "__ionicstorage",
driverOrder: ["indexeddb", "sqlite", "websql"]
})
],
providers: [
DashboardPage,
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}