コンポーネント（親/子）を別のコンポーネント（子/親）にインポートする必要がある場合は、

Question

私は公式公式ウェブサイト（https://angular.io/tutorial/toh-pt3）のチュートリアルに従っています。私たちは、親コンポーネントのテンプレート、<hero-detail [hero]="selectedHero"></hero-detail>でこれを追加しますので、親コンポーネント（AppComponent）は、子コンポーネント（HeroDetailComponent）との通信方法を学ぶとき

1. 、その親コン​​ポーネントの会談で私にのように見えます子コンポーネントを親コンポーネント（import { HeroDetailComponent } from './hero-detail.component'; ）にインポートせず、親コンポーネントを子コンポーネント（import { AppComponent } from './app.component';）にインポートしないのはなぜですか？

2. 私たちがそれをしなければ、角度がどのようにしてこのことが分かりますか（[hero]="selectedHero"）？ '英雄'は子コンポーネントのプロパティです'selectedHero'は親コンポーネントのプロパティですか？

3. いつコンポーネントをインポートする必要がありますか？私たちがする必要がないとき？

Answer 1

なぜ私たちに輸入が必要かわかりません。基本的に、モジュールはコードを異なるファイルに分割することを可能にします。あなたは一つのファイル/モジュールに次のしていると仮定します

class AComp {} 

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

さて、あなたはBCompは、そのクラスのインスタンスを作成するために、ACOMPクラスに参照を使用していることをここで見ることができます。その後、我々は異なるモジュール/クラスに、これらのクラスを分割することを決定した：あなたはb-comp.jsを実行する場合、それはb-comp.jsファイル/モジュールにはACompクラスがないと言うことになるので

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

class AComp {} 

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

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

は今、JavaScriptエンジンがエラーをスローします。そこで、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クラス参照を使用し、またHeroDetailComponentAppComponentクラスリファレンスを使用します。だから、それらをインポートする必要はありません。

私たちがそれをしないと、角度がどのようにこのことがわかるのですか？ （[hero] = "selectedHero"）？ '英雄'は子コンポーネントのプロパティです。 'selectedHero'は親コンポーネントのプロパティですか？

それは親AppComponentテンプレートで提供される情報から推測することができ、角度のコンパイラは、すべての必要な情報を取得するには、この構文[hero]="selectedHero"を使用しているので。