Question

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

我一直在努力解决这个问题，而且唯一看起来很有希望的是使用bi-directional service (link to angular docs)。但是，我不确定如何让它发挥作用。

这是一个证明：

的插图

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

我已经设置了一个简单的路由配置，可以自动重定向到TestComponent。当我点击“点击”按钮时路线应用程序级别的按钮，我希望能够在TestComponent中触发swift package update函数。

希望一切都清楚 - 任何建议都表示赞赏！

以下代码;

app.component

clickDetected()

test.service

@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)
  }
}

test.component

@Injectable()
export class TestService {

  private clickedSource = new Subject<string>();

  clicked$ = this.clickedSource.asObservable();

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

}

Answer 1

您只需.subscribe()即可收到Observable次活动的.next()：

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

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

Answer 2

编辑 - 请勿这样做 -

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

结束编辑

您也可以使用共享模块执行此操作。您创建一个模块，提供测试服务并在AppModule和路由模块中导入。然后，您可以向两个组件提供相同的服务实例。我从你的代码中找到了一个可以说明它如何工作的插件。

如果您想了解有关SharedModule的更多信息，请查看Angular2 doc。 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 { }

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

2 个答案:

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

2 个答案:

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