Typescript从另一个组件类访问组件类变量

Question

I have two components, class ChatPage and HomePage .

Class ChatPage has a big constructor due to injecting many services, and an array:

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

Class HomePage , which is another component:

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

    chatRoot = ChatPage;
    settingsRoot = SettingsPage;

 constructor(private chatService: ChatService) {

 }

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

 }
}

I want to reset the msg to [] .

However, in the current state I get a complaint that msg is not known.

Answer 1

In the above example, since ChatService is shared by both Components. You can have msg variable in that service and modify it from both components. This way it is available in both components.

The Other way is using @Input() decorator, if there is a parent component which holds both A and B components.

Answer 2

You don't initialize ChatPage or call the component. The chatRoot = ChatPage variable in your example is just a copy of the class definition where msg was never initialized.

There are multiple ways for components to communicate or share information. Refer to this page of the documentation for details and examples. Most common methods are:

• Keeping common information accessible through a service
• Using an @Input() decorator for hierarchical communication between components