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

1 回答

• 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 文件/模块中看到的那样 had to use import because we use AComp 类引用 . 如果我们在 BComp 文件/模块中没有使用 AComp 类引用，则不需要导入 AComp 类 .

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

  正如您在本教程中看到的那样， AppComponent 类在文件/模块代码中都不直接使用 HeroDetailComponent 类引用， HeroDetailComponent 也不使用 AppComponent 类引用 . 所以没有必要导入它们 .

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

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

  回复于 2024-04-25T16:33:53+08:00