web-dev-qa-db-ja.com

Angular2の別のコンポーネント内にコンポーネントを配置する方法は？

私はAngularが初めてで、まだ理解しようとしています。私はMicrosoft Virtual Academyのコースを受講しましたが、それは素晴らしかったですが、彼らが言ったことと私のコードの振る舞いの間には少し矛盾が見つかりました！具体的には、次のように「別のコンポーネント内にコンポーネントを配置」しようとしました。

@Component({
    selector: 'parent',
    directives: [ChildComponent],
    template: `
            <h1>Parent Component</h1>
            <child></child>
        `
    })
    export class ParentComponent{}


@Component({
    selector: 'child',    
    template: `
            <h4>Child Component</h4>
        `
    })
    export class ChildComponent{}

これは彼らがコースで作成するのと同じ例ですが、私のコードでは機能しません！特にVisualStudioは、「ディレクティブ」プロパティがコンポーネントデコレータに存在しないと言っています。どうすれば解決できますか？

angularangular2-directives
32
Paolo Ardissone

入れないdirectivesのコンポーネント

register@NgModule宣言で：

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App , MyChildComponent ],
  bootstrap: [ App ]
})

そして、あなたは次のように親のテンプレートHTMLにそれを置くだけです：<my-child></my-child>

それでおしまい。

42
Royi Namir

あなたのAngular-2バージョンのディレクティブはコンポーネントデコレータではサポートされていないので、register directive@ NgModuleの他のコンポーネントと同じにし、以下のようにコンポーネントにインポートする必要がありますまた、directives: [ChildComponent]をデコレータから削除します。

import {myDirective} from './myDirective';
3
Sandip - Full Stack Developer

ディレクティブ属性を削除すると、機能するはずです。

@Component({
    selector: 'parent',
    template: `
            <h1>Parent Component</h1>
            <child></child>
        `
    })
    export class ParentComponent{}


@Component({
    selector: 'child',    
    template: `
            <h4>Child Component</h4>
        `
    })
    export class ChildComponent{}

ディレクティブはコンポーネントに似ていますが、属性で使用されます。また、宣言子@Directiveもあります。ディレクティブの詳細については、 構造ディレクティブ および 属性ディレクティブ を参照してください。

他の2種類のAngularディレクティブがあり、他の場所で詳細に説明されています：（1）コンポーネントと（2）属性ディレクティブ。

コンポーネントは、ネイティブHTML要素の方法でHTMLの領域を管理します。技術的には、テンプレートを使用したディレクティブです。

また、用語集を開いている場合、コンポーネントもディレクティブであることがわかります。

ディレクティブ 次のカテゴリのいずれかに分類されます。

  • コンポーネント アプリケーションロジックをHTMLテンプレートと組み合わせて、アプリケーションビューをレンダリングします。通常、コンポーネントはHTML要素として表されます。これらは、Angularアプリケーションの構成要素です。

  • 属性ディレクティブ は、他のHTML要素、属性、プロパティ、およびコンポーネントの動作をリッスンして変更できます。これらは通常、HTML属性として表されるため、名前です。

  • 構造ディレクティブ は、通常、要素とその子を追加、削除、または操作することにより、HTMLレイアウトを整形または再形成します。

コンポーネントにテンプレートがあるという違い。 Angular Architecture 概要を参照してください。

ディレクティブは、@Directiveデコレータを持つクラスです。コンポーネントはテンプレート付きディレクティブです。 @Componentデコレータは、実際にはテンプレート指向の機能で拡張された@Directiveデコレータです。

@Componentメタデータにはdirectives属性がありません。 Component decorator を参照してください。

3
Roman C