Angular 2 =>通知app组件中事件的路由组件-Java 学习之路

慢慢地掌握角度2但我在一个特定的问题上走到了尽头 .

如果你有这个安排;

<parent>
    <child/>
</parent>

我可以通过使用@Input（）通知子进程父进行更改，并让它听取更改 . 我可以使用@Output（）和EventEmitters通知父母孩子的变化 .

我现在看到的是通知主要appComponent中发生的特定事件的路由组件（在其单击链接时动态加载的组件） . 见下面的例子;

<app>
    <button (click)='addEntity()>Add</button>
    <router-outlet></router-outlet>
</app>

我希望能够通知已加载到路由器插座中的组件已单击该按钮 .

使用的一个例子是具有多个功能（英雄/联系人/宠物等），每个功能都有自己的对话框来添加实体 . 根据所选路线，它需要通知所选特征组件（例如ContactComponent）以显示其特定细节组件/视图/模板（例如contact-detail.component） .

什么是实现这一目标的最佳方式？

干杯

2 回答

还可以使用共享服务在不同组件之间进行通信，例如，通过这样的信使服务：

MessengerService

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class MessengerService {
    private messageSource: BehaviorSubject<boolean> = new BehaviorSubject(true); 
    public message = this.messageSource.asObservable();
    public buttonClicked(value: boolean) {
        this.messageSource.next(value);
    }
}

Parent Component

export class ParentComponent {
    constructor(private messengerService: MessengerService) { }
    addEntity() {
        this.messengerService.buttonClicked(true);
    }
}

Child Component

import { Subscription } from 'rxjs/Rx';
export class ChildComponent implements OnInit, OnDestroy {
    private messageSubscription: Subscription;
    constructor(private messengerService: MessengerService) { }
    ngOnInit() {
        this.messageSubscription = this.messengerService.message.subscribe(m => {
            // Act upon the click event
        });
    }
    ngOnDestroy() {
        this.messageSubscription.unsubscribe();
    }
}

这将是一种干净的方式来解耦组件并依赖信使服务（您可以在多个组件中订阅，无论何时需要）

回复于 2024-04-28T12:51:09+08:00

0
好吧，如果我理解你的问题，试试这个：在addEntity（）方法上放一个返回值，可以是一个字符串，或者你知道你要添加的东西（英雄/联系人/宠物） . 然后在主模板上放一个局部变量，它接受addEntity（）方法的返回，如下所示：
```
<button (click)='#type_added = addEntity()>Add</button>
```
然后你可以将“#type_added”局部变量传递给另一个组件，如下所示：
```
<router-outlet [added] = #type_added></router-outlet>
```
并且您必须在路由器插座组件（.ts）中声明@Output的“添加”宽度变量 .
回复于 2024-04-28T12:51:09+08:00

Angular 2 =>通知app组件中事件的路由组件

2 回答

相关问题