相当するものはありません$scope.emit()か$scope.broadcast()AngularJSからは。コンポーネント内のEventEmitterが近くなりますが、前述のとおり、直接の親コンポーネントにのみイベントを発行します。
Angularには、以下で説明しようとする他の選択肢があります。
@Input（）バインディングを使用すると、アプリケーションモデルを有向オブジェクトグラフ（ルートからリーフ）に接続できます。コンポーネントの変更検出戦略のデフォルトの動作は、接続されているコンポーネントからのすべてのバインディングのすべての変更をアプリケーションモデルに伝播することです。
補足：モデルには、ビューモデルとアプリケーションモデルの2種類があります。アプリケーションモデルは、@ Input（）バインディングを介して接続されます。ビューモデルは、コンポーネントのテンプレートにバインドされている単なるコンポーネントプロパティ（@Input（）で装飾されていない）です。
あなたの質問に答えるには：
兄弟コンポーネント間で通信する必要がある場合はどうなりますか？
共有アプリケーションモデル：兄弟は、共有アプリケーションモデル（angular 1と同様）を介して通信できます。たとえば、1つの兄弟がモデルに変更を加えると、同じモデルへのバインディングを持つ他の兄弟が自動的に更新されます。
コンポーネントイベント：子コンポーネントは、@ Output（）バインディングを使用して親コンポーネントにイベントを発行できます。親コンポーネントはイベントを処理し、アプリケーションモデルまたはそれ自体のビューモデルを操作できます。アプリケーションモデルへの変更は、同じモデルに直接または間接的にバインドするすべてのコンポーネントに自動的に伝達されます。
サービスイベント：コンポーネントはサービスイベントをサブスクライブできます。たとえば、2つの兄弟コンポーネントが同じサービスイベントをサブスクライブし、それぞれのモデルを変更することで応答できます。これについては、以下で詳しく説明します。
ルートコンポーネントと、いくつかのレベルにネストされたコンポーネントとの間の通信方法を教えてください。
- 共有アプリケーションモデル：@Input（）バインディングを介して、ルートコンポーネントから深くネストされたサブコンポーネントにアプリケーションモデルを渡すことができます。任意のコンポーネントからモデルへの変更は、同じモデルを共有するすべてのコンポーネントに自動的に伝播します。
- サービスイベント：EventEmitterを共有サービスに移動することもできます。これにより、任意のコンポーネントがサービスを注入し、イベントをサブスクライブできるようになります。このようにして、ルートコンポーネントはサービスメソッド（通常はモデルを変更）を呼び出すことができ、次にイベントが発行されます。数層下の、同様にサービスを注入し、同じイベントにサブスクライブした孫コンポーネントは、それを処理できます。共有アプリケーションモデルを変更するイベントハンドラーは、それに依存するすべてのコンポーネントに自動的に伝播します。これはおそらく
$scope.broadcast()Angular 1に最も近いものです。次のセクションでは、このアイデアについて詳しく説明します。
サービスイベントを使用して変更を伝播する監視可能なサービスの例
以下は、サービスイベントを使用して変更を伝播する監視可能なサービスの例です。TodoItemが追加されると、サービスはコンポーネントサブスクライバーに通知するイベントを発行します。
export class TodoItem {
constructor(public name: string, public done: boolean) {
}
}
export class TodoService {
public itemAdded$: EventEmitter<TodoItem>;
private todoList: TodoItem[] = [];
constructor() {
this.itemAdded$ = new EventEmitter();
}
public list(): TodoItem[] {
return this.todoList;
}
public add(item: TodoItem): void {
this.todoList.push(item);
this.itemAdded$.emit(item);
}
}
ルートコンポーネントがイベントをサブスクライブする方法を次に示します。
export class RootComponent {
private addedItem: TodoItem;
constructor(todoService: TodoService) {
todoService.itemAdded$.subscribe(item => this.onItemAdded(item));
}
private onItemAdded(item: TodoItem): void {
// do something with added item
this.addedItem = item;
}
}
いくつかのレベルでネストされた子コンポーネントは、同じ方法でイベントをサブスクライブします。
export class GrandChildComponent {
private addedItem: TodoItem;
constructor(todoService: TodoService) {
todoService.itemAdded$.subscribe(item => this.onItemAdded(item));
}
private onItemAdded(item: TodoItem): void {
// do something with added item
this.addedItem = item;
}
}
以下は、サービスを呼び出してイベントをトリガーするコンポーネントです（コンポーネントツリーの任意の場所に配置できます）。
@Component({
selector: 'todo-list',
template: `
<ul>
<li *ngFor="#item of model"> {{ item.name }}
</li>
</ul>
<br />
Add Item <input type="text" #txt /> <button (click)="add(txt.value); txt.value='';">Add</button>
`
})
export class TriggeringComponent{
private model: TodoItem[];
constructor(private todoService: TodoService) {
this.model = todoService.list();
}
add(value: string) {
this.todoService.add(new TodoItem(value, false));
}
}
参照：Angularでの変更検出