Angular7-コンポーネント

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

ファイル構造にはアプリコンポーネントがあり、次のファイルで構成されています-

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

プロジェクトのセットアップ中に角度ルーティングを選択した場合、ルーティングに関連するファイルも追加され、ファイルは次のようになります-

app-routing.module.ts

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

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

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

次のコード行でコンポーネントを作成するコマンドを実行しましょう-

ng g component new-cmp

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

C:\projectA7\angular7-app>ng g 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 (477 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 { AppRoutingModule } from './app-routing.module';
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,
      AppRoutingModule
   ],
   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',//selector to be used inside l file.
   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ファイルが表示される場合、 NewCmpComponent という新しいクラスが作成されます。このクラスは、コンストラクターとngOnInit（）というメソッドがあるOnInitを実装します。 ngOnInitは、クラスが実行されるときにデフォルトで呼び出されます。

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

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

<html lang = "en">

   <head>
      <meta charset = "utf-8">
      <title>Angular7App</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).catch(err => console.error(err));

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';

@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule '
   ],
   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 7';
}

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

@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タグがあります。現在スタイルは必要ないため、スタイルファイルは空です。しかし、プロジェクトを実行すると、新しいコンポーネントに関連するものはブラウザに表示されません。

ブラウザは次の画面を表示します-

スクリーン

表示されている新しいコンポーネントに関連するものは表示されません。作成された新しいコンポーネントには、以下の詳細を含むlファイルがあります-

<p>
   new-cmp works!
<p>

しかし、ブラウザで同じことをしているわけではありません。ここで、新しいコンポーネントのコンテンツを取得してブラウザに表示するために必要な変更を見てみましょう。

セレクタ ' app-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 をapp.componentlに追加する必要があります。つまり、次のようにデフォルトで作成されるメインの親です-

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

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

新しい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 {
   newcomponent = "Entered in new component created";
   constructor() { }
   ngOnInit() { }
}

このクラスでは、 newcomponent と呼ばれる1つの変数を追加しました。値は「Entered in new component created」です。

上記の変数は次のように new-cmp.componentl ファイルに追加されます-

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

ここで、* <app-new-cmp> </app-new-cmp> * selectorを app.componentl に含めました。これは、親コンポーネントのlであり、 new- cmp.componentl ファイルがブラウザーに表示されます。また、次のようにnew-cmp.component.cssファイルに新しいコンポーネントのCSSを追加します-

p {
   color: blue;
   font-size: 25px;
}

そのため、pタグの青色とフォントサイズを25pxとして追加しました。

次の画面がブラウザに表示されます-

カラーフォント

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

Angular7-components

Angular7-コンポーネント