如何从父组件向子组件发出事件？

24 浏览
0 Comments

如何从父组件向子组件发出事件？

我目前正在使用Angular 2。通常我们使用@Output() addTab = new EventEmitter();然后使用addTab.emit()来向父组件发送事件。\n有没有办法可以反过来，从父组件到子组件发送事件呢？

0

3 答案

0 Comments

在父组件中，您可以使用()来访问子组件的方法/变量。

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

更新:

Angular 8及以上版本 - 

(NumberComponent, { static: false })

这似乎比使用可观察对象更简洁。缺点是子组件必须在视图中。如果子组件是通过路由加载的，那么这种方法将失败，因为numberComponent将为undefined。

这是一个很好的实践吗？我同意这种方法比使用可观察对象更清晰，但我对从父组件操纵子组件的变量持怀疑态度。无论如何，这对我的需求非常好用，谢谢！

这是一个很好的提示。看起来在Angular 8中@ViewChild已经改变了，或者至少我不得不指定@ViewChild的选项。在我的情况下，我使用了这个：(Other, { static: false }) private otherComponent: Other;

{ static: false }是Angular 9+中的默认选项。这意味着不再需要指定它。

是的。你是对的。

这是一个很好的解决方案，特别是当您只需要检查子组件的状态，而不是操纵它时。太棒了！

0
0 Comments

从上述内容中，我们可以得出以下问题的原因和解决方法：

问题原因：如何从父组件向子组件发出事件？

解决方法：

1. 使用ngOnChanges方法：当父组件的数据发生变化时，子组件可以通过ngOnChanges方法得到通知，并在此方法中执行相应操作。

// 父组件
public inputToChild: Object;
// 父组件HTML

// 子组件
@Input() data;
ngOnChanges(changes: { [property: string]: SimpleChange }) {
    let change: SimpleChange = changes['data'];
    // 在这里可以对变化进行操作，可以获取到之前的值和当前的值
}

2. 使用共享服务概念：创建一个服务，并在共享服务中使用Observable。子组件订阅该Observable，当有变化时，子组件将得到通知。当需要传递的内容不仅限于输入数据时，可以使用这种方法。

// 共享服务
subject: Subject = new Subject();
// 父组件
constructor(sharedService: SharedService)
this.sharedService.subject.next(data);
// 子组件
constructor(sharedService: SharedService) {
this.sharedService.subject.subscribe((data) => {
    // 当父组件发出next方法时，可以在这里接收到数据并进行操作
});




同时，文章中还提到了一些问题的解决方案：


- 如果遇到ExpressionChangedAfterItHasBeenCheckedError错误，可以将``修改为``，以获取更改。


- 在使用共享服务时，服务应该在组件类的元数据头部，而不是作为一个模块。模块服务是单例的，因此具有全局作用域。在那里存储的任何变量都会持续存在并且是全局的，可能会导致缺陷和难以发现的错误。适用于配置，但对于大多数其他情况则不适用。


- ngOnChanges方法和输入属性的setter之间有什么区别？或者它们完全是不同的用例？


- 使用onChanges方法的一个注意事项是，如果触发两次相同的值，它将被视为单一的，因为onChanges还没有被触发，因为值尚未改变。

									
				

									

			
			
0

		
	

											


	

		

			

								
									
			

			

				

					

						

                        

						

														0 Comments						

					

					

															

				

				

										
如何从父组件向子组件发出事件？


问题的原因：


- 作者想要在父组件中触发一个事件，并将这个事件传递给子组件。


解决方法：


- 在父组件中声明一个Subject，并将其作为Observable传递给子组件。


- 子组件只需要订阅这个Observable即可。


下面是代码示例：



// 父组件
import { Subject } from 'rxjs';
eventsSubject: Subject = new Subject();
emitEventToChild() {
  this.eventsSubject.next();
}












// 子组件
import { Subscription, Observable } from 'rxjs';
private eventsSubscription: Subscription;
events: Observable;
ngOnInit(){
  this.eventsSubscription = this.events.subscribe(() => doSomething());
}
ngOnDestroy() {
  this.eventsSubscription.unsubscribe();
}





通过这种方法，还可以传递事件数据。例如，在父组件中使用`this.eventsSubject.next({data});`触发事件，然后在子组件中使用`this.events.subscribe(({data}) => doSomething(data));`接收事件数据。


对于子组件需要订阅多个事件的情况，可以使用以下语法：``。


- 通过将Subject转换为Observable，可以避免子组件调用next()方法。


- 在父组件中，eventsSubject应该是公开的。


- 使用不同于events的变量名，更好地描述其实际目的。


- 检查父组件的HTML模板，确保"events"属性正确绑定。


- 在Angular中，应该使用EventEmitter而不是Subject。


- 传递事件给子组件的做法存在争议，可以考虑直接传递数据并在子组件中进行跟踪，或者使用共享服务。


- 可以使用BehaviorSubject来确保观察者始终提供值，包括初始化。


- 如果使用ngOnChanges，它会在没有原因的情况下触发多次，因此这看起来是一个不好的模式。


- doSomething()应该被声明为一个函数。


以上就是关于如何从父组件向子组件发出事件的原因和解决方法的整理。

									

				

									

			

			
0