Question

我目前正在使用angular2。通常我们使用@Output（）addTab = new EventEmitter（）;然后addTab.emit（）向父组件发出一个事件。从父母到孩子，我们是否有任何方式做过cersa。

Answer 1

使用RxJ，您可以在父组件中声明一个Subject，并将其作为Observable传递给子组件，子组件只需要订阅此Observable。

父组件

private eventsSubject: Subject<void> = new Subject<void>();

emitEventToChild() {
  this.eventsSubject.next()
}

父母HTML

<child [events]="eventsSubject.asObservable()"> </child>

子组件

private eventsSubscription: any

@Input() events: Observable<void>;

ngOnInit(){
  this.eventsSubscription = this.events.subscribe(() => doSomething())
}

ngOnDestroy() {
  this.eventsSubscription.unsubscribe()
}

Answer 2

据我所知，有两种标准方法可以做到这一点。

<强> 1。 @input

每当父级中的数据发生更改时，子级都会收到通知 ngOnChanges方法。孩子可以采取行动。这是标准与孩子互动的方式。

Parent-Component
public inputToChild: Object;

Parent-HTML
<child [data]="inputToChild"> </child>       

Child-Component: @Input() data;

ngOnChanges(changes: { [property: string]: SimpleChange }){
   // Extract changes to the input property by its name
   let change: SimpleChange = changes['data']; 
// Whenever the data in the parent changes, this method gets triggered. You 
can act on the changes here. You will have both the previous value and the 
current value here.
}

共享服务理念

在共享服务中创建服务并使用observable。孩子订阅它，每当有变化时，都会通知孩子。这也是一种流行的方法。当您想要发送除您传递的数据之外的其他内容作为输入时，可以使用它。

SharedService
subject: Subject<Object>;

Parent-Component
constructor(sharedService: SharedService)
this.sharedService.subject.next(data);

Child-Component
constructor(sharedService: SharedService)
this.sharedService.subject.subscribe((data)=>{

// Whenever the parent emits using the next method, you can receive the data 
in here and act on it.})

Answer 3

使用子组件中的@Input（）装饰器允许父级绑定到此输入。

在子组件中，您将其声明为：

@Input() myInputName: myType

要将属性从父级绑定到子级，您必须在模板中添加装订括号和它们之间输入的名称。

示例：

<my-child-component [myChildInputName]="myParentVar"></my-child-component>

但要注意，对象作为引用传递，因此如果在子对象中更新了对象，则父对象的var将会更新。这可能会导致某些不需要的行为。对于主要类型，将复制该值。

进一步阅读：

文档：https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 4

在父组件中，您可以使用@ViewChild（）访问子组件的方法/变量。

@Component({
  selector: 'app-number-parent',
  templateUrl: './number-parent.component.html'
})
export class NumberParentComponent {
    @ViewChild(NumberComponent)
    private numberComponent: NumberComponent;
    increase() {
       this.numberComponent.increaseByOne();
    }
    decrease() {
       this.numberComponent.decreaseByOne();
    }
}

Answer 5

在父级中，您可以使用@ViewChild引用子级。必要时（即事件被触发时），您可以使用@ViewChild引用从父级执行子级中的方法。

如何从父级到子级以角度发出事件？

5 个答案: