Question

我有一个角度2项目设置，其中有一个名为＆＃39; app组件的父组件＆＃39;在ap组件中有2个子组件称为＆＃39; child1组件＆＃39;和＆＃39; child2组件＆＃39; 。

我的项目结构如下：

app.component
   -- child1 component
   -- child2 component

现在我的问题是：我在＆＃39; child1组件中有一个按钮＆＃39;并且有一个变量＆lt; variableOfChild2Component＆＃39;在＆＃39; child2组件＆＃39;。现在当我点击＆＃39; child1组件＆＃39;的那个按钮时，child2组件的变量值应该改变。我怎样才能在角度2中达到这个要求？

Answer 1

对于组件交互，求助于服务，我只是使用服务的快速名称，但使用对您的用例有意义的东西。

import { Subject } from 'rxjs';

@Injectable()
export class MyService {
  private dataMessenger = new Subject<any>();

  getData(): Subject<any> {
    return this.dataMessenger;
  }

  setData(newData: any) {
    this.dataMessenger.next(newData);
  }
}

现在使用按钮

在组件1中

.
.
.
export class Component1 ... {
  constructor(private myService: MyService) { }

  buttonClick() {
    this.myService.setData("Pass anything you want here");
  }
}

现在在你的组件2类

中

.
.
.
export class Component2 ... {
  variableOfChild2Component: any;

  constructor(private myService: MyService) { }

  ngOnInit() {
    this.myService.getData()
                  .subscribe(data => {
                    // data argument contains whatever you pass to MyService.setData() 
                    // function inside your Component1 class when the button is clicked
                    this.variableOfChild2Component = data;
                  });
  }
}

您需要在模块中注册MyService，例如AppModule

@NgModule({
  .
  .
  .
  providers: [ ..., MyService, ... ]
})
export class AppModule { }

如何在角度2中访问其他子组件中的子组件的值

1 个答案: