Show/Hide div 根据 Angular 9 中的切换按钮变化
Show/Hide div according toggle button change in Angular 9
我的 Angular 应用程序中有 2 个单独的组件。
组件之一是顶部导航栏，它包含切换按钮。
其他组件是仪表板，位于单独的模块中。
我的仪表板包含 2 个 div，其中任何一个都应该 hide/show，具体取决于顶部导航栏组件中切换按钮的变化。
示例：选中切换按钮时 div 1 应显示，div 2 应隐藏。
谁能给我一个带有 stack-blitz 示例的解决方案？
Angular 文档有很好的例子可以处理 component interaction
Stackblitz：Link（假设您的组件既不是同级组件也不在同一模块中）
这里我假设两个独立的组件之间存在绑定，这两个组件既不是彼此的子组件也不是彼此的父组件。
一种处理方法是：
可以在 Rxjs 的 Subject 和服务的帮助下设置和取消设置 Toggle 标志。
StackBlitz Link
- 向所有模块共享的主模块添加服务。您可以在两个组件中注入该服务。然后，您需要向仪表板可以订阅的服务添加一个主题。导航将使用该服务来触发主题。 Google‘有主题的基本服务’
- 您可以向 url 添加查询参数。然后，该仪表板可以查找它以了解它所处的切换状态。类似于：?toggle=true。它不漂亮，但它有一个优点。您可以添加书签或将 url 发送给某人，它会知道切换状态。
记得使用按钮（不是锚链接）进行切换
我的 Angular 应用程序中有 2 个单独的组件。 组件之一是顶部导航栏，它包含切换按钮。 其他组件是仪表板，位于单独的模块中。
我的仪表板包含 2 个 div，其中任何一个都应该 hide/show，具体取决于顶部导航栏组件中切换按钮的变化。
示例：选中切换按钮时 div 1 应显示，div 2 应隐藏。
谁能给我一个带有 stack-blitz 示例的解决方案？
Angular 文档有很好的例子可以处理 component interaction
Stackblitz：Link（假设您的组件既不是同级组件也不在同一模块中）
这里我假设两个独立的组件之间存在绑定，这两个组件既不是彼此的子组件也不是彼此的父组件。
一种处理方法是：
可以在 Rxjs 的 Subject 和服务的帮助下设置和取消设置 Toggle 标志。 StackBlitz Link
- 向所有模块共享的主模块添加服务。您可以在两个组件中注入该服务。然后，您需要向仪表板可以订阅的服务添加一个主题。导航将使用该服务来触发主题。 Google‘有主题的基本服务’
- 您可以向 url 添加查询参数。然后，该仪表板可以查找它以了解它所处的切换状态。类似于：?toggle=true。它不漂亮，但它有一个优点。您可以添加书签或将 url 发送给某人，它会知道切换状态。
记得使用按钮（不是锚链接）进行切换