Question

我有一个声明为public的数组：

[X-1]

存储用户名的AddUserComponent中的

。

我需要在另一个组件AddTopicComponent中使用此数组，以将用户的名称显示为下拉列表。

如何在AddTopicComponent中使用此数组值？这两个组件不是父子组件。

Answer 1

您可以使用@Input将容器组件中的数据共享到内部组件。请查看此说明：https://angular.io/guide/attribute-directives#pass-values-into-the-directive-with-an-input-data-binding

如果组件之间的关系不是父子关系，则可以使用以下任何一种方法：

使用服务（最值得推荐）。
使用来自RxJS库的行为主题。
使用浏览器存储（会话/本地），但最不推荐使用浏览器存储数据安全。

Answer 2

下面的示例包含子绑定父级和子级绑定父级。

父到子绑定由属性绑定完成，其中主字符串由名为childToMaster的自定义属性使用@Input传递给子组件。
使用@Output通过事件绑定完成子到父绑定。请参阅childToMaster事件。

Working demo

父组件

import { Component, Output,EventEmitter } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  //passing values from parent to child
  master : String="send from parent";

  //Getting value from child
  childToParent(name){
    this.master=name;
  }

}

父模板

<div>
  <span>Master to Child </span><input type="textbox" [(ngModel)]='master'>
</div>

<app-child [childToMaster]=master (childToParent)="childToParent($event)">

</app-child>

包含模板的子组件

import { Component, Input, Output,EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <input type="textbox" [(ngModel)]='masterName'> 
    <button (click)="sendToParent(masterName)" >sendToParent</button>
    <div>{{masterName}}</div>
  `
})
export class AppChildComponent {
  //getting value from parent to child
  @Input('childToMaster') masterName: string;

  @Output() childToParent = new EventEmitter<String>();



  sendToParent(name){
    //alert("hello");
    this.childToParent.emit(name);
  }
}

在angular2中使用另一个组件中的组件数组

2 个答案: