angularjs - 在 Angular 2 组件中导航到路由时传递 @Input 并订阅 @Output

标签 angularjs typescript angular angular2-routing typescript1.8

当我们导航到路线并加载组件时,

  1. 我们可以在加载的子组件中传递用 @Input 装饰的变量吗?我们可以订阅用 @Output 装饰的 EventEmitter 吗?
  2. 父级中是否有可用的lifecycle Hook,其中定义了Route,我们可以获得对已加载组件的引用,以便动态地将值\订阅函数传递给子组件?

父组件

   @Component({
    moduleId: module.id,
    selector: "parent",
    templateUrl: "<router-outlet></router-outlet>"
  })
  @Routes([
   { path: "/child-component1", component: Child1Component }
  ])
  export class Parent {
   // Can we pass var1 and subscribe close here of Child1Component when route is navigated dynamically based upon path?
   // Is there any lifecycleHook available in parent where Route is defined?
  }

子组件

  @Component({
    moduleId: module.id,
    selector: "child-component1",
    template: "<div>{{var1}}</div><button (click)='closeMenu()'>Close</button>"
  })
  export class Child1Component {
   @Input() var1: string;
   @Output() close: EventEmitter<any> = new EventEmitter<any>();

   constructor() { }

   closeMenu = (): void => {
      this.close.emit("");
   }
 }

我正在使用Angular2 RC1

提前致谢!

最佳答案

只需使用共享服务进行组件之间的通信。另请参阅https://angular.io/docs/ts/latest/cookbook/component-communication.html#bidirectional-service

输入和输出不能用于路由组件,因为它们只能应用于同一模板文件中的子组件。

关于angularjs - 在 Angular 2 组件中导航到路由时传递 @Input 并订阅 @Output,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37558497/

相关文章:

javascript - Angular 2 : Contenteditable div doesn't work as expected

angular - 在 Angular CLI 版本 7.1.0 中找不到 '@angular/http'

angularjs - 如何使用 jasmine 对 Angular-toastr 进行单元测试

javascript - 在 Angular js Getters 中传递参数

javascript - ui路由器解决问题

Angular5 http 最佳实践

javascript - Angular2 + ngrx/存储 : how to change state within a loop?

javascript - success 函数内的 loadPlayer 函数未定义

java - 如何从数据库中删除项目?

typescript - 枚举反向查找