相关疑难解决方法(0)

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

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

我考虑过将一个事件发送到父(AppComponent),并让父设置在DetailComponent上使用@Input设置selectedItem.id.或者我可以使用具有可观察订阅的共享服务.

编辑:通过事件+ @Input设置所选项目不会触发DetailComponent,但是,如果我需要执行其他代码.所以我不确定这是一个可以接受的解决方案.

但是这两种方法看起来都比Angular 1的做法复杂得多,这种做法要么通过$ rootScope.$ broadcast或$ scope.$ parent.$ broadcast.

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

有没有其他/更直接的方法来实现这一目标？

在这里，我想在同一个父级的两个组件之间进行通信。基本上，我想将数据从一个组件传递到另一个组件。

第一个组件.ts

constructor(
    private service: service1,
    private serve: service2,
) {}

ngOnInit() {
    this.service.getUser().subscribe((data) => {
        this.serve.setAccount("1", "apple");
        this.serve.setEnvironment("Happy"); 
    })
}

第二组件.ts

constructor(private usingService : service2) { }

 ngOnInit() {
 this.Account = this.serve.getAccount();
 this.environmentDetails = this.serve.getEnvironment();

 }

我需要从 firstComponent 检索数据到 second.here 第一个组件在第二个组件之后加载。soo，第一个组件设置的数据稍后在图片中。

尝试使用 rxjs.but 的主题，我们如何在这个例子的 firstComponent.ts 中使用主题？

我如何在这两个组件之间进行通信，因为它们是彼此的兄弟姐妹？请帮忙

我的 Angular 应用程序中有两个组件（Component1 和 Component2）。我在我的应用程序组件中呈现了这两个组件。现在我想将一个值从 Component1 发送到 Component2。如何发送。有没有最佳实践？？

在 Component1 我有一个这样的代码。组件1.html

<button (click)="passData()">Click Me</button>

组件1.ts

import { Component, OnInit , Output , EventEmitter } from '@angular/core';
@Component({
  selector: 'app-component1',
  templateUrl: './component1.component.html',
  styleUrls: ['./component1.component.css']
})
export class Component1Component implements OnInit {

   Component1Variable:string="Component1VariableSent";
  constructor() { }
  ngOnInit() {
  }
   @Output()
   SendValue=new EventEmitter<string>();
   passData()
   {
        this.SendValue.emit(this.Component1Variable);
   }
}

在 Component2.html 我有

<app-component1 (SendValue)="ValueFromComp1($event)"> </app-component1>
{{ValueFromComponent1}}

在 Component2.ts 我有

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-component2',
  templateUrl: './component2.component.html',
  styleUrls: ['./component2.component.css']
}) …