Angular 2 で兄弟コンポーネント間の通信を促進するにはどうすればよいですか?

Angular 2 での兄弟コンポーネントの通信

Angular 2 ではコンポーネントの相互作用に大きな変更が導入されており、兄弟コンポーネント間でのデータの受け渡しが懸念される可能性があります。以下に実行可能な解決策をいくつか示します。

共有サービスの使用

推奨されるアプローチの 1 つは、共有サービスを利用することです。このサービスは、コンポーネント間に直接アクセスすることなく、コンポーネント間のデータ交換の媒体として機能します。以下に例を示します。

// 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 中国語 Web サイトの他の関連記事を参照してください。