如何在 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 是从哪里来的。我正在使用 angular 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。但是将服务定义为 class 属性的类型。

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

}

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

How to set a boolean flag from a component to another in Angular?

typescript

angular-components

angular