Question

我正在构建一个应用程序，其中一个模块加载一个共享的全局组件以及一个由路由器驱动的子组件。当模块加载子级时，它应该接收数据并将其发送到全局组件。

如何从动态加载的子组件中检索数据？

全局组件：

组件：

users

HTML：

export class global__component implements OnInit {
  constructor() { }

  // bring data from other components
  @Input() pageTitle: string;

  ngOnInit() {
  }
}

模块组件：

组件：

<p>{{pageTitle}}</p>

HTML：

export class parent__component OnInit {
  constructor() { }

  // bring data from other components
  @Input() pageTitle: string;

  ngOnInit() {
  }
}

子组件一：

组件：

<global-component [pageTitle]="pageTitle"></global-component>
<router-outlet></router-outlet>

子组件二：

组件：

export class child_component_one implements OnInit {
  constructor() { }

  // send data to other components
  @Output() pageTitle: string = 'Child component One title';

  ngOnInit() {
  }
}

Answer 1

@Josavish的评论使我转向路由器搜索答案，偶然发现this post here，其中包含我需要的代码。

父组件：

组件：

export class parent__component implements OnInit {
  constructor() { }

  // set default value
  pageTitle: string = '';

  // get data from children components
  setData(data){
    this.pageTitle = data.updateComponentData().pageTitle;
  }

  ngOnInit() {
  }

}

HTML：

<global-component[pageTitle]="pageTitle"></global-component>
<router-outlet (activate)="setData($event)"></router-outlet>

子组件：

组件：

export class child__component implements OnInit {
  constructor() { }

  // set page title
  pageTitle: string = 'Child component title';

  // update parent component data
  updateComponentData(){
    return {
      pageTitle: this.pageTitle
    }
  }

  ngOnInit() {

  }

}

角度动态的孩子与父母的交流

1 个答案: