Question

目前在我的项目中，我有一个angular2 tabset，显示其他html模板，如此 -

Tabs.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>

Tabs.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页上发生的更改作出反应，或者在选项卡返回第1页时运行某些功能。

Answer 1

您需要从 PageOne 向标签组件发出事件，然后从标签中控制其他组件：

@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.module中提供服务。 ts | js 和 PageOne 和 PageTwo ，因为标签模块的组件可以访问它（角度为2的DI），然后他们通过该服务进行通信，可以 publich / subscribe 消息，有关详细信息，请参阅

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

和 publih / subscribe 您可以参考： https://coryrylan.com/blog/angular-2-observable-data-services

Angular 2 tabset - 与彼此交谈的标签

1 个答案: