Javascript 为什么我们需要使用@ViewChild从其他组件调用组件的函数？

我的导师告诉我，“在angular中，我们可以通过导入服务来使用在任何服务中定义的函数，但我们不能在任何其他组件中导入组件。要使用在任何其他组件中定义的函数，我们需要使用@ViewChild（ComponentName）。”

但当我尝试在其他组件中调用某个组件的函数而不使用@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");
  }
}

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();
  }
}

为了在“app”组件中使用“testcomponent”组件的“hello”功能，我尝试了以下方法：

app.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");
  }
}

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();
  }
}

在控制台中打印“Hello ABC”，并且没有发生任何错误

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

现在考虑当我在“App.Engult.ts”文件中使用@ VIEWSOL调用“TestCube”组件的“HeloLo（）”函数：

  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();
    }

  }

既然在案例1中，我能够在“app”组件中调用“testcomponent”的“hello（）”方法，那么为什么我们需要在案例2中使用@ViewChild呢

---

另外，请解释一下，如果我们可以通过导入任何其他组件中的任何组件来调用该组件的函数（如案例1），那么调用组件或服务的函数有什么区别？

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

这是因为它不被认为是一个好的方法来注入组件（如果我们只能访问函数，为什么不使用一个简单的类？）

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

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

点击