Angular 2同级组件通信

JavaScript TypeScript

Vicky

2020-05-25

我有一个ListComponent。在ListComponent中单击某个项目时,该项目的详细信息应显示在DetailComponent中。两者都同时显示在屏幕上,因此不涉及路由。

如何告诉DetailComponent单击ListComponent中的哪个项目?

我已经考虑过向父对象(AppComponent)发出事件,并让父对象使用@Input在DetailComponent上设置selectedItem.id。或者,我可以将共享服务与可观察的订阅一起使用。


编辑:通过事件+ @Input设置选定的项目不会触发DetailComponent,但是,以防万一我需要执行其他代码。因此,我不确定这是否可以接受。


但是,这两种方法似乎都比通过Angular 1做事的方式复杂得多,后者是通过$ rootScope。$ broadcast或$ scope。$ parent。$ broadcast实现的。

由于Angular 2中的所有内容都是组件,我很惊讶没有更多关于组件通信的信息。

是否有另一种/更直接的方法来完成此任务?

第4176篇《Angular 2同级组件通信》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
Elena 2020.05.25

我一直在通过绑定将父级的setter方法传递给它的子级之一,并使用子级组件中的数据调用该方法,这意味着父级组件已更新,然后可以使用新数据更新其第二个子级组件。它确实需要绑定“ this”或使用箭头功能。

这样做的好处是,孩子不需要特别的共享服务,因此彼此之间不会那么耦合。

我不完全确定这是最佳做法,听到其他人对此的看法会很有趣。

镜风 2020.05.25

共享服务是解决此问题的好方法。如果您还想存储一些活动信息,则可以将共享服务添加到您的主要模块(app.module)提供程序列表中。

@NgModule({
    imports: [
        ...
    ],
    bootstrap: [
        AppComponent
    ],
    declarations: [
        AppComponent,
    ],
    providers: [
        SharedService,
        ...
    ]
});

然后,您可以直接将其提供给您的组件,

constructor(private sharedService: SharedService)

使用共享服务,您可以使用功能,也可以创建主题以一次更新多个位置。

@Injectable()
export class FolderTagService {
    public clickedItemInformation: Subject<string> = new Subject(); 
}

在列表组件中,您可以发布点击的项目信息,

this.sharedService.clikedItemInformation.next("something");

然后您可以在详细信息组件中获取此信息:

this.sharedService.clikedItemInformation.subscribe((information) => {
    // do something
});

显然,列出组件共享的数据可以是任何数据。希望这可以帮助。

Chloe 2020.05.25

这里有一个讨论。

https://github.com/angular/angular.io/issues/2663

自2017年7月起,Alex J的回答很好,但不再适用于当前的Angular 4。

而且,该链接器将演示如何使用共享服务和可观察服务在兄弟姐妹之间进行通信。

https://embed.plnkr.co/P8xCEwSKgcOg07pwDrlO/

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android