Angular7-コンポーネント

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

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

app.component.css
app.component.html
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変数が含まれています。これが親コンポーネントになります。

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

コマンドを実行して、以下のコード行でコンポーネントを作成しましょう-

ng g component new-cmp

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

C:\projectA7\angular7-app>ng g component new-cmp 
CREATE src/app/new-cmp/new-cmp.component.html (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)

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

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

new-cmp.component.css-新しいコンポーネントのcssファイルが作成されます。
new-cmp.component.html −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 .html file. 
   templateUrl: './new-cmp.component.html', 
   // 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は、クラスの実行時にデフォルトで呼び出されます。

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

のURLをヒットしたとき "http://localhost:4200/" ブラウザでは、最初に以下に示すindex.htmlファイルを実行します-

<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ファイルであり、ブラウザに何も出力されません。ボディセクションのタグを見てみましょう。

<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.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
   title = 'Angular 7'; 
}

Angularコアがインポートされ、コンポーネントと呼ばれ、同じものがDeclaratorで-として使用されます。

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

セレクターへの宣言子参照では、templateUrlとstyleUrlが指定されています。ここでのセレクターは、上記で見たindex.htmlファイルに配置されたタグに他なりません。

クラスAppComponentには、ブラウザに表示されるtitleという変数があります。@Componentは、app.component.htmlという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.component.html', 
   styleUrls: ['./new-cmp.component.css'] 
}) 
export class NewCmpComponent implements OnInit {   
   constructor() { } 
   ngOnInit() { } 
}

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

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

new-cmp.component.htmlと呼ばれる.htmlは次のとおりです-

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

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

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

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

<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.component.html', 
   styleUrls: ['./new-cmp.component.css'] 
}) 
export class NewCmpComponent implements OnInit {  
   constructor() { } 
   ngOnInit() { } 
}

セレクター、すなわち、 app-new-cmp app.component.htmlに追加する必要があります。つまり、デフォルトで次のように作成されるメインの親です。

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

作成された新しいコンポーネントにさらに詳細を追加して、ブラウザに表示を確認しましょう。

new-cmp.component.ts

import { Component, OnInit } from '@angular/core';

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

クラスには、という1つの変数を追加しました。 newcomponent 値は「作成された新しいコンポーネントに入力されました」です。

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

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

今、私たちは含まれているので <app-new-cmp></app-new-cmp>のセレクター app.component.html これは親コンポーネントの.htmlであり、コンテンツは new-cmp.component.htmlファイルがブラウザに表示されます。また、次のように、new-cmp.component.cssファイルに新しいコンポーネントのcssをいくつか追加します。

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

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

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

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