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

Question

我在 Angular2 项目上工作，其中有一个名为 layout 的文件夹，我在其中将某些页面的通用布局拆分为 3 个其他组件（3 folders-header、边栏和页脚）。我的 header 上有一个锚标签 (...)。点击它后，我需要将 header 扩展到屏幕的左端，同时需要隐藏侧边栏。再次点击锚标签时，两者都应该进入实际位置（切换）。我试过 [ngClass]="{'hide-sidebar' : 标志}" class="fix-header"...

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

我认为可以有另一种逻辑来实现同时点击锚标记（按钮）。希望有人能帮忙

Answer 1

使用@input 和@Output 进行通信

如果组件处于 parent-child 关系中，例如navbar-component在header-component模板中或者header-component在navbar-component模板中，那么可以使用angular@Input@Output装饰器传递组件之间的数据
@Input 和 @Output 以及 angular 文档中的组件交互的更多信息 here

使用服务通讯

如果这些组件没有直接关联，那么您可以使用 service 在这些组件之间进行通信，其中一个组件将数据推送到服务，另一个组件从服务获取数据， Angular 文档 here

中解释了有关使用服务的组件之间通信的更多信息

更新：兄弟姐妹使用 Parent 通信使用 @Input() @Output()

如果您不想使用服务进行通信并使事情不那么复杂，您可以对同级组件使用公共 parent。
假设您要切换的变量位于 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);

}

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

<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 您标记属性已更改，因此您将在 sidebar.component.ts[=36 中定义 @Input() 属性 =]

@Input() flags: boolean;

和一个方法 ngOnChanges（记住要使用 ngOnChanges 你需要在你的 sidebar.component.ts 上实现 OnChanges 接口更多在 OnChanges here)

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

并且 flags 属性将像这样从 parent 传递到侧边栏

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

希望对您有所帮助:)

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

Angular2- Passing states of flag between header and sidebar components

html

javascript

angular2-template

angular