私はAngularの初心者で、まだ理解しようとしているところです。マイクロソフト・バーチャル・アカデミーのコースに沿って学んだのですが、その内容と私のコードの動作に少し食い違いがありました。具体的には、次のように、コンポーネントを別のコンポーネントの中に入れることを試みました。
@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は、コンポーネントデコレーターに 'directives'プロパティが存在しないと言っています。どうすれば解決できますか?
コンポーネントを directives
に置くことはできません。
コンポーネントは @NgModule
の宣言の中に 登録 します。
@NgModule({
imports: [ BrowserModule ],
declarations: [ App , MyChildComponent ],
bootstrap: [ App ]
})
そして、それを親のテンプレートHTMLの中に :<my-child></my-child>
とします。
これで完成です。
directives属性を削除すれば動作するはずです。
@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
を持ちます。ディレクティブについての詳細は Structural Directives および Attribute Directives を参照してください。
アンギュラーのディレクティブには他にも2種類あります。 詳しくは別の場所で説明します。(1)コンポーネントと(2)属性ディレクティブです。
コンポーネントは、HTMLの領域をネイティブな 要素のようにHTMLの領域を管理します。技術的には、テンプレートを持つディレクティブです。
また、用語集を見ると、コンポーネントもディレクティブであることがわかります。
ディレクティブは、以下のカテゴリのいずれかに分類されます。
コンポーネントは、アプリケーションロジックとHTMLテンプレートを組み合わせて、アプリケーションビューをレンダリングします。コンポーネントは、通常、HTML 要素として表現されます。コンポーネントは、Angularアプリケーションの構成要素です。
属性ディレクティブは、他のHTML要素、属性、プロパティ、およびコンポーネントの動作を監視し、変更することができます。これらは
属性ディレクティブは、他のHTML要素、属性、プロパティ、コンポーネントの動作を聞いたり変更したりすることができます。
Structural directivesは、HTMLのレイアウトを形成したり、変更したりする役割を持ちますが、通常は、要素 とその子要素を操作します。
コンポーネントにはテンプレートがあるという違いがあります。Angular Architecture]7の概要を参照してください。
ディレクティブとは、@Directive
デコレーターを持つクラスのことです。コンポーネントは
コンポーネントは、テンプレートを持つディレクティブです。
コンポーネントは、テンプレート付きのディレクティブで、 実際には、テンプレート指向の機能で拡張された @Directive
デコレータです。
メタデータの @Component
には directives
属性がありません。コンポーネントデコレータ]8を参照してください。
お使いのAngular-2バージョンでは、コンポーネントデコレーターでディレクティブがサポートされていないと思います。そのため、他のコンポーネントと同じように@NgModuleにディレクティブ**を登録し、以下のようにコンポーネントでインポートし、さらにデコレーターからdirectives:また、デコレーターから[ChildComponent]
を削除します。
import {myDirective} from './myDirective';