Angular 6-コンポーネント

Angular 6での開発の大部分は、コンポーネントで行われます。コンポーネントは基本的に、ブラウザに表示されるコンポーネントのlファイルとやり取りするクラスです。前の章の1つでファイル構造を見てきました。ファイル構造にはアプリコンポーネントがあり、次のファイルで構成されています-

app.component.css
app.componentl
app.component.spec.ts
app.component.ts
app.module.ts

上記のファイルは、angular-cliコマンドを使用して新しいプロジェクトを作成したときにデフォルトで作成されました。

あなたが app.module.ts ファイルを開いた場合、それはインポートされたいくつかのライブラリと次のようにappcomponentに割り当てられている宣言を持っています-

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

宣言には、既にインポートしたAppComponent変数が含まれています。これが親コンポーネントになります。

現在、angle-cliには、独自のコンポーネントを作成するコマンドがあります。ただし、デフォルトで作成されるアプリコンポーネントは常に親のままであり、次に作成されるコンポーネントが子コンポーネントを形成します。

コマンドを実行してコンポーネントを作成しましょう。

ng generate component new-cmp

コマンドラインで上記のコマンドを実行すると、次の出力が表示されます-

D:\Node\Angular6App>ng generate component new-cmp
CREATE src/app/new-cmp/new-cmp.componentl (26 bytes)
CREATE src/app/new-cmp/new-cmp.component.spec.ts (629 bytes)
CREATE src/app/new-cmp/new-cmp.component.ts (272 bytes)
CREATE src/app/new-cmp/new-cmp.component.css (0 bytes)
UPDATE src/app/app.module.ts (398 bytes)

次に、ファイル構造を確認してみると、src/appフォルダーの下にnew-cmp新しいフォルダーが作成されます。

次のファイルがnew-cmpフォルダに作成されます-

new-cmp.component.css-新しいコンポーネントのcssファイルが作成されます。
new-cmp.componentl-htmlファイルが作成されます。
new-cmp.component.spec.ts-これは単体テストに使用できます。
new-cmp.component.ts-ここでは、モジュール、プロパティなどを定義できます。

次のように変更がapp.module.tsファイルに追加されます-

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
//includes the new-cmp component we created
@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent//here it is added in declarations and will behave as a child component
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]//for bootstrap the AppComponent the main app component is given.
})

export class AppModule { }

*new-cmp.component.ts* ファイルは次のように生成されます-

import { Component, OnInit } from '@angular/core';//here angular/core is imported .
@Component({
  //this is a declarator which starts with @ sign. The component word marked in bold needs to be the same.
   selector: 'app-new-cmp',//
   templateUrl: './new-cmp.componentl',
  //reference to the html file created in the new component.
   styleUrls: ['./new-cmp.component.css']//reference to the style file.
})
export class NewCmpComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

上記のnew-cmp.component.tsファイルを見ると、コンストラクターとngOnInit（）というメソッドを持つOnInit.Inを実装するNewCmpComponentという新しいクラスが作成されます。 ngOnInitは、クラスが実行されるときにデフォルトで呼び出されます。

フローの仕組みを確認しましょう。これで、デフォルトで作成されるアプリコンポーネントが親コンポーネントになります。後で追加されたコンポーネントはすべて子コンポーネントになります。

*http：//localhost：4200/* ブラウザでURLにヒットすると、最初に以下に示すindexlファイルが実行されます-

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>Angular 6 Application</title>
      <base href = "/">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "icon" type = "image/x-icon" href = "favicon.ico">
   </head>
   <body>
      <app-root></app-root>
   </body>
</html>

上記は通常のhtmlファイルであり、ブラウザには何も印刷されていません。 bodyセクションのタグを見てください。

<app-root></app-root>

これはデフォルトでAngularによって作成されたルートタグです。このタグには、 main.ts ファイルに参照があります。

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
   enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

AppModuleはメインの親モジュールのアプリからインポートされ、同じことがブートストラップモジュールにも与えられ、appmoduleがロードされます。

*app.module.ts* ファイルを見てみましょう-

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule { }

ここで、AppComponentは指定された名前、つまり appの参照を保存する変数です。 Component.ts と同じものがブートストラップに与えられます。 app.component.ts ファイルを見てみましょう。

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 Project!';
}

角のコアがインポートされ、コンポーネントと呼ばれ、宣言子で同じものが使用されます-

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})

セレクターへの宣言子参照では、 templateUrl および styleUrl が指定されています。ここでのセレクタは、上記のindexlファイルに配置されたタグにすぎません。

クラスAppComponentには、ブラウザに表示されるtitleという変数があります。

*@ Component* はapp.componentlと呼ばれるtemplateUrlを使用します。これは次のとおりです-

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

HTMLコードと変数タイトルのみが中括弧で囲まれています。 app.component.ts ファイルに存在する値で置き換えられます。これはバインディングと呼ばれます。バインディングの概念については、後続の章で説明します。

これで、 new-cmp という新しいコンポーネントが作成されました。新しいコンポーネントを作成するためにコマンドが実行されると、同じことが app.module.ts ファイルに含まれます。

*app.module.ts* には、作成された新しいコンポーネントへの参照があります。

new-cmpで作成された新しいファイルを確認しましょう。

new-cmp.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.componentl',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   constructor() { }
   ngOnInit() {}
}

ここでは、コアもインポートする必要があります。コンポーネントの参照は、宣言子で使用されます。

宣言子には、 app-new-cmp および templateUrl および styleUrl というセレクターがあります。

*new-cmp.componentl* と呼ばれるlは次のとおりです-

<p>
   new-cmp works!
</p>

上記のように、htmlコード、つまりpタグがあります。現在スタイルは必要ないため、スタイルファイルは空です。しかし、プロジェクトを実行すると、新しいコンポーネントに関連するものはブラウザに表示されません。ここで何かを追加してみましょう。これは後でブラウザで見ることができます。

セレクター、つまり app-new-cmp は次のように app.component l ファイルに追加する必要があります-

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>
<app-new-cmp></app-new-cmp>

*<app-new-cmp> </app-new-cmp>* タグが追加されると、作成された新しいコンポーネントのlファイルに存在するものすべてが、親コンポーネントデータとともにブラウザに表示されます。

新しいコンポーネントl *ファイルと *new-cmp.component.ts ファイルを見てみましょう。

new-cmp.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.componentl',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() {}
   ngOnInit() { }
}

クラスでは、new componentという変数を1つ追加しました。値は「 Entered in new component created 」です。

上記の変数は次のように .new-cmp.componentl ファイルにバインドされています-

<p>
   {{newcomponent}}
</p>
<p>
   new-cmp works!
</p>

appに <app-new-cmp> </app-new-cmp> セレクターを含めたので。親コンポーネントのlであるコンポーネントl *、新しいコンポーネントlファイル（new-cmp.componentl）に存在するコンテンツは、次のようにブラウザーに表示されます-

セレクターブラウザー出力の使用

同様に、要件に従って、 app.componentl ファイルのセレクターを使用してコンポーネントを作成し、リンクすることができます。

Angular6-components

Angular 6-コンポーネント

new-cmp.component.ts

new-cmp.component.ts