从另一个组件类访问组件类变量的 TypeScript

Question

>我有两个组件，类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未知的投诉。

Answer 1

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

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

Answer 2

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

组件可以通过多种方式进行通信或共享信息。有关详细信息和示例，请参阅文档的此页面。最常见的方法是：

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