Question

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

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

我认为可以有另一个逻辑来实现锚点标记（按钮）上的相同命中。希望有人可以提供帮助

Answer 1

使用@input和@Output进行通信

如果组件处于父子关系，例如navbar-component位于header-component模板中，header-component位于navbar-component模板中，然后您可以使用角度@Input @Output装饰器在组件之间传递数据
有关@Input和@Output以及角度文档here

中的组件互动的更多信息

使用服务进行沟通

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

更新：使用@Input() @Output()

进行相同家长沟通的兄弟姐妹

如果您不想使用服务进行通信并使事情变得不那么复杂，则可以使用公共父进程来处理兄弟组件。
让我们假设你要切换的变量驻留在头部组件中，现在你在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);

}

然后在您的父模板中，您将函数绑定到将在触发上述事件时执行的标头，所以在你的父模板中你可以写这个，

<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中定义@Input()属性

@Input() flags: boolean;

和方法ngOnChanges（请注意使用ngOnChanges您需要在侧栏上实现OnChanges界面。更多关于OnChanges {{3} }）

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

并且flags属性将从父

传递到侧边栏

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

希望有所帮助:)

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

1 个答案: