为什么我们需要使用 @ViewChild 从其他组件调用组件的功能?

Question

我的导师告诉我，"在 angular 中，我们可以通过导入该服务来使用任何服务中定义的函数，但我们不能导入任何其他组件中的组件。要使用任何其他组件中定义的函数，我们需要使用 @ViewChild(组件名称("。

但是当我尝试在不使用@viewChild的情况下调用其他组件中的组件的功能时，我成功了，并且没有发生任何错误。

请参考以下示例以了解场景：

案例1：在不使用@ViewChild的情况下调用其他组件中的组件的函数

假设我们有一个组件">

testcomponent"，在该组件中我们有一个"hello"函数，如下所示：

testcomponent.component.ts

import { Component, OnInit, ContentChild, ElementRef } from '@angular/core';
@Component({
selector: 'app-testcomponent',
templateUrl: './testcomponent.component.html',
styleUrls: ['./testcomponent.component.css']
})
export class TestcomponentComponent implements {
constructor(){}
hello(){
console.log("Hello ABC");
}
}

为了在"app"组件中使用"testcomponent"组件的"hello"函数，我尝试了以下方法：

app.component.ts

import { Component} from '@angular/core';
import { TestcomponentComponent } from './testcomponent/testcomponent.component';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit{
constructor(private testcomponent : TestcomponentComponent ){};
ngAfterViewInit(){
this.testComponent.hello();
}
}

在这里，"你好ABC"在控制台中打印，并且没有发生任何错误。

案例2：使用@ViewChild调用其他组件中组件的函数

现在考虑一下我在"app.component.ts"文件中使用@ViewChild调用"testcomponent"组件的"hello(("函数的情况：

import { Component, ElementRef, ViewChild, AfterViewInit} from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit{
@ViewChild(TestcomponentComponent,{static:false}) viewChildOnComponentSelector : TestcomponentComponent;

ngAfterViewInit(){
this.viewChildOnComponentSelector.hello();
}
}

既然在 CASE1 中我能够在"app"组件中调用"testcomponent"的"hello(("方法，那么为什么我们需要像 CASE2 一样@ViewChild呢？

另外请解释一下，如果我们可以通过导入该组件(如 CASE1(来调用任何其他组件中任何组件的功能，那么调用组件或服务的功能有什么区别？

Answer 1

当您在构造函数中注入服务时，这是一个唯一的服务。如果您注入一个组件，则只会注入一个"副本"，而不是您看到的组件，例如，如果您的组件有一个带有 [(ngModel(] 的输入，您永远无法达到输入的值。

这就是为什么它不被认为是一个好的 aproach 注入组件(如果我们只能访问函数，为什么不使用一个简单的类？

注意：如果您在.html中使用按钮调用，则可以简单地使用变量引用，例如，您的主组件如下所示：

<button (click)="child.hello()">click</button>
<app-child-component #child></app-child-component>