打字稿从另一个组件类访问组件类变量答案

【问题标题】：typescript accessing component class variable from another component class打字稿从另一个组件类访问组件类变量
【发布时间】：2018-05-24 15:50:49
【问题描述】：

我有两个组件，ChatPage 和 HomePage 类。

ChatPage 类由于注入了许多服务而有一个很大的构造函数和一个数组：

IonicPage()
@Component({
  selector: 'page-chat',
  templateUrl: 'chat.html',
  providers: [ChatService]
})
export class ChatPage  implements OnInit, OnDestroy{
    msg:any[];

类HomePage，这是另一个组件：

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [ChatService]
})
export class HomePage {

    chatRoot = ChatPage;
    settingsRoot = SettingsPage;

 constructor(private chatService: ChatService) {

 }

 onReset(){
    //this.chatRoot.msg = [];

 }
}

我想将消息重置为[]。

但是，在当前状态下，我收到了 msg 未知的投诉。

【问题讨论】：

你不将一个组件分配给其他组件中的变量，你可以在主页中做一个ViewChild和实例或为msg创建一个模型

标签： angular typescript ionic2

【解决方案1】：

在上面的例子中，因为 ChatService 由两个组件共享。您可以在该服务中使用 msg 变量并从两个组件中对其进行修改。这样它在两个组件中都可用。

另一种方法是使用 @Input() 装饰器，如果有一个父组件同时包含 A 和 B 组件。

【讨论】：

【解决方案2】：

您不初始化ChatPage 或调用组件。您示例中的 chatRoot = ChatPage 变量只是 msg 从未初始化过的类定义的副本。

组件有多种通信或共享信息的方式。有关详细信息和示例，请参阅this page of the documentation。最常用的方法是：

通过服务保持公共信息可访问
使用 @Input() 装饰器在组件之间进行分层通信

【讨论】：