如何通过子路由组件进行父组件交互？ （角2）

Question

在路由配置的根组件中，我有一个按钮。当我点击这个按钮时，我想在激活的子路由中触发一个事件。

我已经为此苦苦挣扎了一段时间，唯一看起来很有希望的是使用bi-directional service (link to angular docs)。但是，我不确定如何让它工作。

这里有一个 plunk 来演示：

https://plnkr.co/edit/7zDTTTlABWD2GFo01jaz?p=preview

我已经设置了一个简单的路由配置，它会自动重定向到 TestComponent。当我在路由应用级别单击“单击”按钮时，我希望能够触发 TestComponent 中的clickDetected() 函数。

希望一切都清楚 - 任何建议都值得赞赏！

代码如下；

---

app.component

@Component({
  selector: 'my-app',
  template: `
    <input type="button" (click)="onClick('hello')" value="click" />
    <router-outlet></router-outlet>
  `,
})
export class AppComponent {
  constructor(private testService: TestService) {
  }

  onClick(v){
    this.testService.declareClick(v)
  }
}

测试服务

@Injectable()
export class TestService {

  private clickedSource = new Subject<string>();

  clicked$ = this.clickedSource.asObservable();

  declareClick(value: string) {
    console.log(value)
    return this.clickedSource.next(value);
  }

}

test.component

@Component({
  selector: 'my-test',
  template: `
    <div>
      <h1>Test Component</h1>
    </div>
  `,
})
export class TestComponent implements OnInit {

  public clicked?: any

  constructor(private testService: TestService) {
  }

  clickDetected(){
   console.log("parent clicked")
  }

  ngOnInit(){
    this.testService.declareClick()
/*      .subscribe((v) => {
        this.clicked? = v;
        console.log(v)
      })*/
  }

}

Answer 1

您只需要将.subscribe() 发送到正在接收.next() 事件的Observable：

this.testService.clickedSource.subscribe((val)=>{
  console.log(2, val);
});

固定 Plunker：https://plnkr.co/edit/aPR6KvuOi2tgQXLgokHi?p=preview

Answer 2

编辑——不要这样做——

感谢@echonax，我了解到这实际上是你应该不做的一个例子。我来实际上是为了帮助人们，最终我学到了一些东西。请参阅 angular2 文档，了解为什么不应该这样做。

结束编辑

您可以也使用共享模块来做到这一点。您创建一个提供测试服务的模块，并在 AppModule 和您的路由模块中导入。然后，您可以为这两个组件提供相同的服务实例。我从你的代码中为你做了一个 plunkr，展示了它是如何工作的。

如果您想了解有关 SharedModule 的更多信息，请查看 Angular2 文档。 https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module

编辑了您的问题 plunkr。 https://plnkr.co/edit/SU8AT4

---

共享模块

import { NgModule } from '@angular/core';
import { TestService } from './test.service';

@NgModule({
  imports: [],
  declarations: [],
  providers: [
    TestService
  ],
  exports: [ ]
})
export class SharedModule { }

新的 AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TestComponent } from './test.component';
import { SharedModule } from './shared.module';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    SharedModule
  ],
  declarations: [
    AppComponent,
    TestComponent
  ],
  providers: [ ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

新的 AppRoutingModule

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TestComponent }  from './test.component';
import { SharedModule } from './shared.module';

const appRoutes: Routes = [
  { path: '',   redirectTo: 'test', pathMatch: 'full' },
  { path: 'test',  component: TestComponent },
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes),
    SharedModule
  ],
  exports: [ RouterModule ],
  providers: []
})
export class AppRoutingModule { }