javascript - Angular2-在标题和侧边栏组件之间传递标志状态

Question

我正在开发 Angular2 项目，其中有一个名为布局的文件夹，我将某些页面的常见布局分成 3 个其他组件(3 个文件夹 - 页眉、侧边栏和页脚)。我的标题上有一个 anchor 标记(...)。点击它后，我需要将标题延伸到屏幕的左端，同时需要隐藏侧边栏。再次点击 anchor 标签时，两者都应该进入实际位置(切换)。我尝试过像 [ngClass]="{'hide-sidebar': flags}"class="fix-header"...

其中flags是一个 bool 变量，并在点击 anchor 标记时切换它的值。我将该变量的状态存储在 localStorage 中，以便可以在另一个组件侧边栏上访问它。 但这帮助我将标题扩展到屏幕左端，并且侧边栏保持不变。

我认为可以有另一种逻辑来实现在 anchor 标记(按钮)上的同一次点击。

Answer 1

使用@input和@Output进行通信

如果组件是父子关系，例如navbar-component 位于 header-component 模板中或 header-component 位于 navbar-component 模板中，那么您可以使用 Angular @Input @Output 装饰器在组件之间传递数据< br/> 有关 Angular 文档中的 @Input 和 @Output 以及组件交互的更多信息 here

使用服务进行通信

如果这些组件不直接相关，那么您可以使用服务在这些组件之间进行通信，其中一个组件将数据推送到服务，另一个组件从服务获取数据， 有关使用服务的组件之间通信的更多信息，请参阅 Angular 文档 here

更新:使用 @Input() 与同一父级进行通信的 sibling @Output()

如果您不想使用服务进行通信并让事情变得不那么复杂，您可以使用同级组件的公共(public)父级。
假设您要切换的变量位于 header 组件中， 现在您在 header.component.ts 中创建一个 EventEmitter ，如下所示

@Output() onToggle = new EventEmitter();  

然后在切换变量的函数中， 你可以这样写，

toggle() {
    if(this.flags === true) {
       this.flags = false;
    }else {
       this.flags = true;
     }
    this.onToggle.emit(this.flags);
    
}

然后在您的父模板中，您将函数绑定(bind)到 header ，该 header 将在触发上述事件时执行， 所以在你的父模板中你可以这样写，

<app-header (onToggle)="notifySidebar($event)"></app-header>

parent.component.ts 中的 notifySidebar 方法将如下所示，

notifySidebar(flags) {
   console.log(flags);
   this.flags = flags;
}

您需要在parent.component.ts中定义上述flags属性(您可以选择任何名称)， 现在是最后一部分，您需要告诉 sidebar.component.ts 您的 flag 属性已更改，因此您将在 sidebar.component.ts 中定义 @Input() 属性

@Input() flags: boolean;

和一个方法ngOnChanges(请记住，要使用ngOnChanges，您需要在sidebar.component.ts上实现OnChanges接口(interface)，更多信息请参见OnChanges here )

ngOnChanges() {
  if(this.flags){
    //do whatever you want to do with flags
}
}

并且 flags 属性将从父级传递到侧边栏，如下所示

<app-sidebar [flags]="flags"></app-sidebar>