Question

我正在进行长轮询并从数据库中获取值（其值发生变化），并将其保存在app.component.ts中名为shareVariable的变量中。

我有一个名为标题的组件，我希望在其中显示此值。这个组件的作用类似于我在每个页面上注入的页眉。但价值并未过去。

这是app.component.ts

这是我试图分享newNotifications

的变量

import { Component, ViewChild, Input } from '@angular/core';
import { Events, Nav} from 'ionic-angular';
import * as io from "socket.io-client";

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  socket: any;
  newNotifications:number;

  constructor(public events: Events) {
    this.newNotifications=0;
    this.fetchNewNotifications();
  }

  fetchNewNotifications() {
    // create a new websocket
    var socket = io.connect('http://localhost:8000');
    socket.on('notification', function (data) {
      this.newNotifications = data.user_id;
      console.log(newNotificationCount);
    });
  }
}

我的常用标题的代码是：

import { NavController, Events} from 'ionic-angular';
import { Component, Input } from '@angular/core';

@Component({
  selector: 'common-header',
  templateUrl: `
  <div>{{newNotificationCount}}</div>
  `
})
export class CommonHeader {
  constructor(public navCtrl: NavController, public events: Events) {
  }
}

我不知道为什么没有分享。

Answer 1

在CommonHeader

中将变量定义为输入

@Input()
newNotificationCount;

并在app.html-template中传递：

<common-header [newNotificationCount]="newNotificationCount">

Answer 2

您不清楚在两个组件中定义newNotificationCount的位置。它编译吗？

看起来你想要的是某种全局变量。

方法1（最简单）： 在单独的文件中定义变量，然后将其导入到要使用它的任何位置。例如：

globals.ts：

var newNotificationCount = 0;

在其他组成部分：

import {newNotificationCount} from 'globals';

然后你可以在文件的任何地方使用这个变量。

方法2：使用Get和Set方法将globals.ts设为service。这有更好的封装，如果它们失控，您可以更好地管理全局变量。

方法3：使用events或subjects：如果您想要做的不仅仅是更新视图（如运行函数），那么这是特别优先的随着您的全球价值的更新。

ionic2-将app.component.ts中的变量传递给另一个组件

2 个答案: