标识符“ isCollapsed”未定义

Question

我正在学习教程，但我不知道为什么这不起作用。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: []
})
export class AppComponent {
 isCollapsed: boolean = true;
}

从另一个组件来看，我有这个标记，其isCollapsed属性上有错误：

<div class="collapse" id="navbarToggleExternalContent" [collapse]="isCollapsed">

此标记是此组件的一部分：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-menu-superior',
  templateUrl: './menu-superior.component.html',
  styleUrls: ['./menu-superior.component.css']
})
export class MenuSuperiorComponent implements OnInit {
  constructor() { }

  ngOnInit() {
  }

}

如果我在isCollapsed内声明MenuSuperiorComponent，问题就解决了。是否可以在app-root上声明要在另一个组件中使用的属性？

Answer 1

否，如果要在组件中使用变量，则无需在组件中定义变量。

在您的情况下，isCollapsed是在单独的类中定义的。为了使用它，您要么需要将值传递给组件，要么使用共享服务在组件之间进行通信。

Answer 2

如果需要组件之间的通信，请使用可观察的服务。设置如下：

collapsed.service.ts

@Injectable()
export class CollapsedService {
  collapsedSubject = new BehaviorSubject<boolean>(false);
  // It's important to use BehaviorSubject and not just Subject, because
  // BehaviorSubject will emit the last value when you .subscribe() or "| async".  So if
  // a component subscribes after the value is set then it will still be up to date.
  collapsed: Observable<string> = this.collapsedSubject.asObservable();

   setCollapsed(value: boolean) {
     this.collapsedSubject.next(value);
  }
}

menu-superior.component.ts

export class MenuSuperiorComponent implements OnInit {
  isCollapsed: Observable<boolean>;

  // Inject our new service wherever we need to read or set the collapsed flag.
  constructor(private collapsedService: CollapsedService) { }

  ngOnInit() {
     this.isCollapsed = this.collapsedService.collapsed;
  }

}

menu-superior.component.html

<div class="collapse" id="navbarToggleExternalContent" [collapse]="isCollapsed | async">

任何时候您都需要设置值，只需在应用程序中的任何位置调用this.collapsedService.setCollapse(true/false)。

请确保在App.module（或Core.module）上的providers数组中注册新服务。

进一步阅读： 关于BehaviorSubject，ReplaySubject和AsyncSubject的好文章-> https://medium.com/@luukgruijs/understanding-rxjs-behaviorsubject-replaysubject-and-asyncsubject-8cc061f1cfc0

编辑：

如果要访问组件中的折叠变量，只需使用this.collapsedService.collapsed.subscribe(value => {});

对其进行订阅

Answer 3

该参数在MenuSuperiorComponent中使用时在组件“ AppComponent”中声明，因此会出现错误。

这两个组件的正确设置以及该参数的使用如下：

AppComponent

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: []
})
export class AppComponent {

}

MenuSuperiorComponent

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-menu-superior',
  templateUrl: './menu-superior.component.html',
  styleUrls: ['./menu-superior.component.css']
})
export class MenuSuperiorComponent implements OnInit {

  isCollapsed: boolean = true;

  constructor() { }

  ngOnInit() {
  }
}

**请注意，该参数已移至 MenuSuperiorComponent 。 这样，可以识别参数。