Question

我在angular 4应用程序中有两个组件，我想在它们之间共享值。

第一个组件有一个下拉按钮，在选择项目时，允许我将数据发送到另一个组件进行打印。

我写了这段代码服务

    import { Injectable } from '@angular/core';


@Injectable()
export class DataService {
    private message : String ;

    sendMessage(message: string) {
        this.message=message;
    }

    getMessage(): String {
        return this.message;
    }
}

具有下拉按钮的组件

export class ToolbarDropdownComponent implements OnInit {

  message: any ;


  constructor(private loginservice:LoginService,private dataService: DataService) { }

  ngOnInit() {
  sendMessage(): void {
this.dataService.sendMessage(this.message);
}

}

其他组件

 constructor(
           private dataservice: DataService
  ) { }

  ngOnInit() {    


console.log("emitted message is"+this.dataservice.getMessage());



  }

Answer 1

如果您的组件彼此之间没有连接（子级父母等），我建议您使用该服务。但是，我假设您的组件是相关的，在这种情况下，您可以使用输入和输出来执行此操作。

如果您的组件都是同一父组件的子组件，则可以将值输出到父组件，然后输入到第二个子组件。

Answer 2

您可以使用第一个组件的属性作为seconde组件的输入，这样您就可以在第二个组件中观看它并更新您的界面。

我希望这对你有所帮助。

角度4中的组件之间的通信和共享数据

2 个答案: