Question

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

当我了解父组件（ AppComponent ）如何与子组件（ HeroDetailComponent ）进行通信时，因为我们在父组件的模板中添加了{{1>我觉得父组件与子组件对话，为什么我们不将子组件导入父组件（<hero-detail [hero]="selectedHero"></hero-detail> ）并将父组件导入子组件（import { HeroDetailComponent } from './hero-detail.component';）？
如果我们不这样做，角度怎么知道这是如何工作的（import { AppComponent } from './app.component';）？ 'hero'是子组件的属性，'selectedHero'是父组件的属性？
我们什么时候需要导入组件？我们什么时候不需要？

Answer 1

我认为你不太明白为什么我们需要进口。从本质上讲，模块允许我们将代码分成不同的文件。假设您在一个文件/模块中有以下内容：

class AComp {}

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

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

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

class AComp {}

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

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

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

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

现在一切都会正常。

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

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

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

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

如果我们不这样做，角度怎么知道这是如何工作的（[英雄] = “selectedHero”）？ 'hero'是子组件的属性， 'selectedHero'是父组件的属性？

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

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

1 个答案: