Angular 2에서 형제 구성 요소 간의 통신을 어떻게 촉진할 수 있나요?

Angular 2의 형제 구성 요소 통신

Angular 2에서는 구성 요소 상호 작용에 중요한 변화가 도입되었으며 형제 구성 요소 간의 데이터 전달이 문제가 될 수 있습니다. . 다음은 몇 가지 실행 가능한 솔루션입니다.

공유 서비스 사용

권장되는 접근 방식 중 하나는 공유 서비스를 활용하는 것입니다. 이 서비스는 서로 직접 액세스하지 않고도 구성 요소 간의 데이터 교환을 위한 매체 역할을 할 수 있습니다. 예는 다음과 같습니다.

// SharedService
@Injectable()
export class SharedService {
  dataArray: string[] = [];

  insertData(data: string) {
    this.dataArray.unshift(data);
  }
}

// ParentComponent
import {SharedService} from './shared.service';

@Component({
  providers: [SharedService],
})
export class ParentComponent {}

// ChildComponent
import {SharedService} from './shared.service';

@Component()
export class ChildComponent {
  data: string[] = [];

  constructor(private _sharedService: SharedService) {}

  ngOnInit() {
    this.data = this._sharedService.dataArray;
  }
}

// ChildSiblingComponent
import {SharedService} from './shared.service';

@Component()
export class ChildSiblingComponent {
  data: string = 'Testing data';

  constructor(private _sharedService: SharedService) {}

  addData() {
    this._sharedService.insertData(this.data);
    this.data = '';
  }
}

SharedService를 두 하위 구성 요소에 주입하면 정보를 교환할 수 있는 공통 데이터 구조에 액세스할 수 있습니다. 이 방법은 또한 여러 구성 요소가 공유 데이터의 변경 사항을 구독할 수 있도록 하여 보다 복잡한 상호 작용을 촉진할 수 있습니다.

참고:

• 공유 서비스 공급자만 포함하세요.
• 필요한 모든 구성 요소에 서비스와 해당 종속성을 삽입합니다.
• 유형 안전성을 보장합니다. 적절한 인터페이스나 정적 타이핑을 사용합니다.

위 내용은 Angular 2에서 형제 구성 요소 간의 통신을 어떻게 촉진할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!