如何在Angular中将布尔标志从一个组件设置为另一个？

Question

我在一个组件的 html 中有 2 个容器，我正在尝试设置从我的侧边菜单组件单击时要显示的容器。我尝试使用服务在我的侧边菜单组件中单击设置布尔标志，然后从另一个组件上的服务中检索它，但它不起作用。

这是我的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;

最后，我的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

您的side-menu.component.ts 似乎没有在构造函数中注入AccountPayalableService。但是将服务定义为类属性的类型。

export class SideMenuComponent implements OnInit {

  constructor(private accountPayableService: AccountPayableService;) {}

  // remaining code continues
}

更新：

您应该将上述更改与@SiddAjmera 的答案结合起来以使其发挥作用。

Answer 2

您正在尝试在此处注入属性而不是依赖项：

@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;
  }

}