javascript - Angular 2 tabset - 选项卡相互对话

Question

目前在我的项目中，我有一个 angular2 选项卡集，它显示其他 html 模板，如下所示 -

标签.html

<tabset class="Myclass">
  <tab heading ="Page1" (select)="sendMessageToPage2(Message)"<PageOne id="0"></PageOne></tab>
  <tab heading ="Page2" (select)="sendMessageToPage1(Message)"<PageTwo></PageTwo></tab>
</tabset>

标签.ts

import {PageOneComponent} from 'filespace.PageOne';
import {PageTwoComponent} from 'filespace.PageTwo';
import { TAB_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  moduleId: module.id,
  selector: 'tabs',
  templateUrl: 'tabs.html',
  directives: [PageOneComponent, PageTwoComponent, TAB_DIRECTIVES] })

export class tabs {

public sendMessageToPage1(message: string){ do Stuff }
public sendMessageToPage2(message: string){ do Stuff }
}

我的问题是如何真正从第 1 页到第 2 页获取消息，或者让它们共享变量。基本上，我需要第 1 页来对第 2 页上发生的更改使用react，或者在返回第 1 页时运行某些功能。

Answer 1

您需要从 PageOne 向 tabs 组件发出事件，然后从选项卡控制其他组件:

@Component({
  selector: 'PageOne',
  templateUrl: `<div (click)="onClick()">Click Me</div>`
})

export class PageOne {
    // creating EventEmitter to emit when onClick is called
    @Output() changed = new EventEmitter();
    onClick() {
        this.changed.emit();
    }
}

或者更好的方法是在这两个组件(PageOne 和 PageTwo)之间共享服务并通过该服务进行通信，简而言之，tabs 模块 在 tabs.module 中提供服务。 ts|js 和 PageOne 和 PageTwo 作为选项卡模块的组件可以访问它(Angular2 中的 DI)，然后它们通过该服务进行通信，它们可以公开/订阅消息，更多信息请引用

https://angular.io/docs/ts/latest/tutorial/toh-pt4.html http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html

对于发布/订阅您可以引用: https://coryrylan.com/blog/angular-2-observable-data-services