Angular CLIのインストールnpm install -g @angular/cliAngular CLIコマンドタイプの決定ng help [options]Angularバージョンの表示ng --versionプロジェクトの作成ng new 프로젝트이름プロジェクトの実行ng serveプロジェクト構築ng build

hello構成部品の作成

1.

Angularは、リアクターとは異なるhtml、css、およびタイプスクリプトを作成します.
hello.component.tsファイルコード

import { Component } from "@angular/core";

@Component({
	selector: "hello",
	templateUrl: "./hello.component.html",
	styleUrls: ["./hello.component.css"]
})
export class HelloComponent {



}

構成部品にするには、@angular/coreからComponentを呼び出して構成部品属性を作成します.

2

app.module.tsから@NgModuleの声明にHelloComponentを導入する.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello/hello.component';

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

3.

app.component.htmlに<hello></hello>マークを入れる.

構成部品の自動作成

端末上のng generate component 이름は、自動的に構成部品を作成する.
自動ログインモジュール.ng g c 이름と略して、上記と同じ

構成部品の管理

app.component.htmlは画面を構成します.



app-rootにはapp-header、app-section、app-footerが含まれています
app-ssectionのサブコンポーネントはsectionです.コンポーネントによって管理されます.
(sectionフォルダにサブアセンブリng g c section/이름を作成)
sectionフォルダのbutton、time-displayサブコンポーネント

データのバインド

time-displayフォルダの構成

time-display.component.ts(素子)test="시간값"
time-display.component.html(テンプレート)
time-display.component.tsのテスト値を使用したい場合は、{{네이밍}}を使用します.

コンポーネントとテンプレート間のデータバインド.
構成部品から->テンプレートに一方向にバインドします.

≪イベント｜Events｜ldap≫

htmlタグ内に(이벤트)を使用します.
(click)clickイベントを使用します.

<!-- buttons.component.html -->
<button class="start-btn" (click)="test()" >
  시작
</button>

クリックするたびにテスト関数を実行
テスト関数は構成部品によって作成されます.

[開始](Start)ボタンを押すたびに、コンソールでテストが行われます.

test関数パラメータでevent伝達値を受信する場合、常に「event伝達値を受信する場合、常に」event伝達値を受信する場合、「常に」

<!-- buttons.component.html -->
<button class="start-btn" (click)="test($event)" () >
  시작
</button>

コンポーネントに$eventプロパティを設定するには
(:MouseEventしなくても動作可能)

//buttons.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-buttons',
  templateUrl: './buttons.component.html',
  styleUrls: ['./buttons.component.scss']
})
export class ButtonsComponent implements OnInit {

  constructor() { }

  test($event:MouseEvent) {
    console.log($event)
  }

  ngOnInit(): void {
  }

}

「≪実行|Go|emdw≫」ボタンをクリックすると、イベント・プロパティがコンソールに書き込まれます.

親および子構成部品データのバインド

1.データを子->親コンポーネントにバインドする

ボタン構成部品からセクション構成部品へのデータのバインド
ボタン構成部品(子)

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

@Component({
  selector: 'app-buttons',
  templateUrl: './buttons.component.html',
  styleUrls: ['./buttons.component.scss']
})
export class ButtonsComponent implements OnInit {

  // @Output은 컴포넌트에 이벤트 발생 시킬 수 있게 해 줌
  // <string>을 써 주면 string값만 넣도록 설정 가능
  @Output() clickEvent = new EventEmitter<string>();


  constructor() { }

  test($event:MouseEvent) {
    console.log($event)
  }

  start() {
    // emit() 함수는 자식컴포넌트가 부모컴포넌트에 데이터를 전달 할 수 있게 해 줌
    this.clickEvent.emit("string");
  }

  ngOnInit(): void {
  }

}

@Output()およびemit()関数を使用します.emit(데이터)を使用してデータを移動

部分構成部品(親)

サブコンポーネントから受信したクリックイベントとしてstartTimeをクリックすると、サブコンポーネントから受信した文字列が表示されます.
ボタンを押すと、コンソールに文字列が表示されます.

2.親->子コンポーネントへのデータのバインド

time-display構成部品(サブアイテム)
親コンポーネントを @Input()で受信する準備をします.@Input() inputData!: number;は親からinputDataの名前でNumber Typeを受け入れるという意味です.

部分構成部品(親)
<app-time-display [inputData]="present" >受け取った価格は[]です.

モジュールの作成

ng g m 이름またはng g m 경로/이름ex)ng g m section/stopwatch節フォルダにstopwatchモジュールを作成する

ルータモジュール

app.module.ts@NgModule AnimportsのAppRoutingモジュールが必要です.プロジェクト作成時にルーティングを尋ねる
ルーティングベース

//app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: "", //경로
    redirectTo: "stopwatch",  //ex) https://domain.com/index
    pathMatch: "full" //ex) prefix로 설정하면 https://domain.com/index*** 일 때 index만 맞아도 연결
  },
  // {
  //   path: "index", 
  //   component: AppComponent // index로 갈 때 AppComponent 보여주기
  // }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

他のモジュールでルーティングを使用する場合

//section.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SectionComponent } from './section.component';
import { StopwatchModule } from './stopwatch/stopwatch.module';
import { RouterModule, Routes } from '@angular/router';
import { StopwatchComponent } from './stopwatch/stopwatch.component';
import { ClockComponent } from './clock/clock.component';


const routes : Routes = [
  {
    path: 'stopwatch',
    component: StopwatchComponent,
  },
  {
    path: 'clock',
    component: ClockComponent,
  }
]


@NgModule({
  declarations: [
    SectionComponent,
    ClockComponent,
  ],
  exports: [
    SectionComponent,
    RouterModule
  ],
  imports: [
    CommonModule,
    StopwatchModule,
    RouterModule.forChild(routes)
  ]
})
export class SectionModule { }

ルーティングは、htmlで<router-outlet></router-outlet>を使用することを要求する.(ページを表示)<a [routerLink]="'/clock'">시계로 이동</a>は、このようなルーティングを許可する(クリックして/clockページに移動する)
モジュールファイル@NgModuleのimportsには、RouterModuleが含まれている必要があります.

サービスの作成

ng g s 이름