Question

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

如果你有这种安排;

<parent>
    <child/>
</parent>

我可以通过使用@Input（）通知子节点父节点的更改并让它听取更改。我可以使用@Output（）和EventEmitters通知父母孩子的变化。

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

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

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

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

实现这一目标的最佳途径是什么？

干杯

Answer 1

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

<强> 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);
    }
}

父组件

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

子组件

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();
    }
}

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

Answer 2

如果我理解你的问题，请尝试以下方法：在addEntity（）方法上放置一个返回值，可以是一个字符串，或者你知道你要添加的东西（英雄/接触者/宠物）。然后在主模板上放置一个局部变量，它接受addEntity（）方法的返回，如下所示：

<button (click)='#type_added = addEntity()>Add</button>

然后您可以将“#type_added”局部变量传递给另一个组件，如下所示：

<router-outlet [added] = #type_added></router-outlet>

并且您必须在路由器插座组件（.ts）中声明@Output的“添加”宽度。

角度2 =＆gt;在应用程序组件

2 个答案: