当我们需要在另一个组件（子/父）中导入组件（父/子）时？

Posted 2023-02-23

【中文标题】当我们需要在另一个组件（子/父）中导入组件（父/子）时？

【英文标题】：When we need to import component (parent/child) in another component (child/parent)?

【发布时间】：2018-01-03 23:28:28

【问题描述】：

我正在关注angular官方网站（https://angular.io/tutorial/toh-pt3）的教程。

当我了解父组件（AppComponent）如何与子组件（HeroDetailComponent）通信时，因为我们在父组件的模板中添加了这个，<hero-detail [hero]="selectedHero"></hero-detail> ，在我看来父组件与子组件对话，为什么我们不将子组件导入父组件（import HeroDetailComponent from './hero-detail.component'; ) 并将父组件导入子组件 (import AppComponent from './app.component';)？

如果我们不这样做，Angular 怎么知道它是如何工作的 ([hero]="selectedHero")？ 'hero'是子组件的属性，'selectedHero'是父组件的属性？

什么时候需要导入组件？什么时候不需要？

【参考方案1】：

我认为您不太了解我们为什么需要导入。本质上，模块允许我们将代码拆分为不同的文件。假设您在一个文件/模块中有以下内容：

class AComp 

class BComp 
   constructor() 
       // creates new instance of AComp
       new AComp();
   

现在，您可以在此处看到 BComp 使用 reference 到 AComp 类来创建该类的实例。然后我们决定将这些类拆分成不同的模块/类：

----------------------------- a-comp.js -----------------------------

class AComp 

----------------------------- b-comp.js -----------------------------

class BComp 
   constructor() 
       // creates new instance of AComp
       new AComp();
   

如果你现在运行b-comp.js，javascript 引擎会抛出一个错误，因为它会说b-comp.js 文件/模块中没有AComp 类。所以我们需要告诉 JS 引擎去哪里寻找AComp。我们通过导入来做到这一点：

import  AComp  from 'a-comp';
class BComp 
   constructor() 
       // creates new instance of AComp
       new AComp();
   

现在一切都会好起来的。

什么时候需要导入组件？什么时候不需要？

如您所见，我们必须使用导入，因为我们在b-comp.js 文件/模块中使用 AComp 类引用。如果我们不在BComp 文件/模块中使用AComp 类引用，则无需导入AComp 类。

...为什么我们不将子组件导入父组件

从教程中可以看出，AppComponent 类都没有直接在文件/模块代码中使用HeroDetailComponent 类引用，HeroDetailComponent 也没有使用AppComponent 类引用。所以不需要导入它们。

如果我们不这样做，Angular 怎么知道它是如何工作的 ([hero]="selectedHero")？ 'hero' 是子组件的属性， 'selectedHero' 是父组件的属性吗？

因为可以从父 AppComponent 模板中提供的信息推断出这一点，Angular 编译器使用此语法 [hero]="selectedHero" 来获取所有必需的信息。