각도에서 주제를 사용하는 방법

2336 단어
각도에서 주제를 사용하는 방법을 구현해 봅시다.
먼저 component1 및 component2라는 2개의 구성 요소를 만듭니다.
이것은 서로 다른 구성 요소 간에 데이터를 공유하는 것과 같습니다.
서비스를 통해,

간단한 입력을 만들고 texInput을 다른 구성 요소에 공유합니다.

먼저 component1.ts에 함수를 만듭니다.

구성 요소 ts에서

 enteredText: string;
  clickFun(){
    console.log(this.enteredText)
  }



componenten1.html에서

<div class="container">
  <input type="text" [(ngModel)]="enteredText">
  <button (click)="clickFun()">click</button>
</div>





comp1의 상단 입력 텍스트에서
component2의 텍스트 comp2 작업

이제 component2를 생성합니다.


<div class="container">
  <p>
    comp2 works! {{inputText}}
  </p>
</div>



그리고 component2 ts에서

  inputText : string



이제 입력 component1에서 component2로 데이터를 공유하기 위한 서비스를 만듭니다.

datasubject = new Subject<string>();

 shareDataText(data: any) {
    this.datasubject.next(data.toString()); //
  }




rxjs에서 주제 가져오기를 잊지 마세요.
이미 서비스를 생성한 경우
이제 app.module에서 서비스를 호출합니다.
정확히 제공업체: [NameService]

component1에서 서비스를 호출하자

  constructor(private dataservice: DataService) { }



서비스를 가져오는 것을 잊지 마세요
이제 클릭버튼 함수에서 호출을 생성합니다.

 clickFun(){
    this.dataservice.shareDataText(this.enteredText)
  }


component2에서 서비스를 호출합니다.

 ngOnInit() : void{
    this.dataservice.datasubject.subscribe(value => {
      this.inputText = value
    })
  }



component1에서 입력 버튼을 클릭하면 볼 수 있습니다.
데이터는 component2에 표시됩니다.

좋은 웹페이지 즐겨찾기