Как установить логический флаг от компонента к другому в Angular?

Question

У меня есть 2 контейнера в html компонента, я пытаюсь указать, какой контейнер будет отображаться при щелчке из компонента бокового меню. Я попытался использовать службу, чтобы установить логический флаг при нажатии на компоненте моего бокового меню, а затем извлечь его из службы на другом компоненте, но он не работает.

Это мой side-menu.component.html:

<li>
  <a href="#accountPayableSubMenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Account Payable</a>
  <ul class="collapse list-unstyled" id="accountPayableSubMenu">

    <li>
      <a [routerLink]="['./account-payable']" (click)="onCreateAccountPayableClick()">Create Account Payable</a>
    </li>

    <li>
      <a [routerLink]="['./account-payable']" (click)="onViewAccountPayableClick()">View Account Payable</a>
    </li>

  </ul>
</li>

Это мой side-menu.component.ts:

export class SideMenuComponent implements OnInit {
  accountPayableService: AccountPayableService;

  constructor() {}

  ngOnInit() {}

  onCreateAccountPayableClick() {
    this.accountPayableService.createAccountPayableClick = true;
    this.accountPayableService.viewAccountPayableClick = false;
  }

  onViewAccountPayableClick() {
    this.accountPayableService.createAccountPayableClick = false;
    this.accountPayableService.viewAccountPayableClick = true;
  }
}

и мой account-payable.service.ts:

@Injectable({ providedIn: 'root' })
export class AccountPayableService {
  createAccountPayableFlag = this.createAccountPayableClick;
  viewAccountPayableFlag = this.viewAccountPayableClick;

  constructor(
    private http: HttpClient,
    public createAccountPayableClick: boolean = false,
    public viewAccountPayableClick: boolean = false
  ) {}

}

, и у меня есть это в моем account-payable.component.ts для получения логических значенийиз службы:

export class AccountPayableComponent implements OnInit {
  constructor(
    private formBuilder: FormBuilder,
    private accountPayableService: AccountPayableService,
    private alertService: AlertService
  ) {}

  createFlag = this.accountPayableService.createAccountPayableFlag;
  viewFlag = this.accountPayableService.viewAccountPayableFlag;

Наконец, у меня есть эти 2 контейнера в моем account-payable.component.html, который показывает в зависимости от *ngIf="viewFlag" и *ngIf="createFlag:

<div class="container-fluid h-100 d-flex flex-column" *ngIf="createFlag">
    <div class="row flex-fill no-gutters ">
      <div class="col-12 mh-100">
      ...
      </div>
    </div>
</div>

<div class="container-fluid h-100 d-flex flex-column" *ngIf="viewFlag ">
    <div class="row flex-fill no-gutters ">
      <div class="col-12 mh-100">
      ...
      </div>
    </div>
</div>

Это неработает, и я вижу эту ошибку в консоли, когда я нажимаю на свое меню:

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[Boolean]: 
  StaticInjectorError(Platform: core)[Boolean]: 
    NullInjectorError: No provider for Boolean!
NullInjectorError: StaticInjectorError(AppModule)[Boolean]: 
  StaticInjectorError(Platform: core)[Boolean]: 
    NullInjectorError: No provider for Boolean!
    at NullInjector.get (core.js:855)
    at resolveToken (core.js:17513)
    at tryResolveToken (core.js:17439)
    at StaticInjector.get (core.js:17265)
    at resolveToken (core.js:17513)
    at tryResolveToken (core.js:17439)
    at StaticInjector.get (core.js:17265)
    at resolveNgModuleDep (core.js:30392)
    at NgModuleRef_.get (core.js:31577)
    at injectInjectorOnly (core.js:734)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39679)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)

Могу ли я знать, что пошло не так? Я не совсем понимаю, откуда исходит NullInjector. Я использую угловой 8.

Это мой app.component.html:

  <div class="row flex-fill no-gutters my-content" style="min-height: 0;">

    <!-- Side menu -->
    <div class="col-2 mh-100" *ngIf="currentUser">
      <app-side-menu></app-side-menu>
    </div>

    <!-- Content -->
    <div class="col-10 mh-100">
      <router-outlet></router-outlet>
    </div>

  </div>

Мой app-routing.module.ts:

const appRoutes: Routes = [
  { path: '', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
  { path: 'account-payable', component: AccountPayableComponent, canActivate: [AuthGuard] },
  // otherwise redirect to home
  { path: '**', redirectTo: '' }
];

Answer 1

Вы пытаетесь внедрить свойство вместо зависимости здесь:

@Injectable({ providedIn: 'root' })
export class AccountPayableService {
  createAccountPayableFlag = this.createAccountPayableClick;
  viewAccountPayableFlag = this.viewAccountPayableClick;

  constructor(
    private http: HttpClient,
    public createAccountPayableClick: boolean = false,
    public viewAccountPayableClick: boolean = false
  ) {}

}

Отсюда ошибка.

Измените это на:

@Injectable({ providedIn: 'root' })
export class AccountPayableService {
  createAccountPayableFlag: boolean;
  viewAccountPayableFlag: boolean;

  constructor(private http: HttpClient) {
    this.createAccountPayableClick = false;
    this.viewAccountPayableClick = false;
  }

}

Answer 2

Ваш side-menu.component.ts не вводит AccountPayalableService в конструктор. Но определил службу как тип для свойства класса.

export class SideMenuComponent implements OnInit {

  constructor(private accountPayableService: AccountPayableService;) {}

  // remaining code continues
}

Обновление:

Вы должны объединить вышеуказанное изменение с ответом @SiddAjmera, чтобы оно заработало.