Anglar CLI를 통한 구성 요소 생성

여기 기사. Anglar CLI 에서 생성된 Anglar 애플리케이션의 구성
그러면 Angualr 응용 프로그램은 구성 요소를 만드는 것입니다. 이번에는 Component의 개발을 살펴보겠습니다.
Anglar CLI로 구성 요소의 초기 형태 만들기
Anglar CLI 를 사용하면 다음 명령을 실행하여 명령줄에서 초기 형태를 만들 수 있습니다.
어셈블리 생성 명령
어셈블리의 초기 형태를 생성하는 명령(예 1)

$ ng generate component hoge-hoge
installing component
  create src/app/hoge-hoge/hoge-hoge.component.css
  create src/app/hoge-hoge/hoge-hoge.component.html
  create src/app/hoge-hoge/hoge-hoge.component.spec.ts
  create src/app/hoge-hoge/hoge-hoge.component.ts
  update src/app/app.module.ts

어셈블리의 초기 형태를 생성하는 명령(예 2)

$ ng g component PiyoPiyo
installing component
  create src/app/piyo-piyo/piyo-piyo.component.css
  create src/app/piyo-piyo/piyo-piyo.component.html
  create src/app/piyo-piyo/piyo-piyo.component.spec.ts
  create src/app/piyo-piyo/piyo-piyo.component.ts
  update src/app/app.module.ts

구성 요소의 초기 형태를 만드는 명령 (예 3)

$ ng g component fooBar
installing component
  create src/app/foo-bar/foo-bar.component.css
  create src/app/foo-bar/foo-bar.component.html
  create src/app/foo-bar/foo-bar.component.spec.ts
  create src/app/foo-bar/foo-bar.component.ts
  update src/app/app.module.ts

구성 요소의 초기 형태를 만드는 명령 (예 4)

$ ng g component bar_bar
installing component
  create src/app/bar-bar/bar-bar.component.css
  create src/app/bar-bar/bar-bar.component.html
  create src/app/bar-bar/bar-bar.component.spec.ts
  create src/app/bar-bar/bar-bar.component.ts
  update src/app/app.module.ts

점

gengerate도 g

로 생략할 수 있다

구성 요소 이름은 하이픈, 낙타 껍질(Upper/Lower), 뱀 가죽 중 하나로 구분할 수 있음

구성 요소는 하이픈으로 구분된 파일 이름으로 생성

구성 요소는 src/app/의 아래에 파일 이름과 같은 이름의 디렉터리를 생성하고 그 아래에 배치한다

생성*.css, *.html, *.spec.ts, *.ts된 4개 파일*.spec.ts은 테스트 코드)

src/app/app.module.ts 업데이트됨

*.ts 파일 보기
생성된 어셈블리를 보면 다음과 같습니다.
여기에는 상기 네 개의 구성 요소 중 하나만 보고 다른 구성 요소도 같다.
hoge-hoge.component.ts

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

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

  constructor() { }

  ngOnInit() {
  }

}

hoge-hoge.component.html

<p>
  hoge-hoge works!
</p>

점

On Init 피import

On Init는 라이프 사이클을 체크하는 데 사용되는 인터페이스

캠코더의 selector에서 문자열 'app' + 연결 문자 구분자로 템플릿의 탭을 정의합니다

클래스 이름은 Upper 낙타 껍질 + 문자열 "Component"로 정의됩니다

src/app/app.module.업데이트 내용 보기
Anglar CLI 가 구성 요소를 생성한 후 앞에서 설명한 src/app/app 를 참조하십시오.module.ts가 자동으로 업데이트됩니다.
안을 봐라
src/app/app.module.ts

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

import { AppComponent } from './app.component';

// 生成した4つのコンポーネントが追加されている
import { HogeHogeComponent } from './hoge-hoge/hoge-hoge.component';
import { PiyoPiyoComponent } from './piyo-piyo/piyo-piyo.component';
import { FooBarComponent } from './foo-bar/foo-bar.component';
import { BarBarComponent } from './bar-bar/bar-bar.component';

@NgModule({
  declarations: [
    AppComponent,
    // 生成した4つのコンポーネントが追加されている
    HogeHogeComponent,
    PiyoPiyoComponent,
    FooBarComponent,
    BarBarComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

구성하다.
생성된 네 개의 구성 요소가 import 문장에 추가되었습니다.의decllations에서 이 모듈에 속하는 구성 요소로 그것들을 추가로 선포한 것도 알 수 있다.
생성된 구성 요소 호출
여기까지는 구성 요소의 생성과 생성에 대한 정의와 src/app/app입니다.module.ts의 업데이트 내용을 보았지만, 이 상태에서 프로그램을 시작하더라도 생성된 구성 요소는 프로그램에서 호출되지 않습니다.

이 상태에서 어플리케이션 확인

템플릿 편집
응용 프로그램에 구성 요소를 다음과 같은 src/app/app에 추가합니다.component.편집)을 참조하십시오.
src/app/app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
  <img width="300" 
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
</div>

<!-- もともとはここに各種リンクがあったが邪魔なので削除 -->
<!-- 生成した4つのコンポーネントを追加する -->
<app-hoge-hoge></app-hoge-hoge>
<app-piyo-piyo></app-piyo-piyo>
<app-foo-bar></app-foo-bar>
<app-bar-bar></app-bar-bar>

편집 후 어플리케이션 재확인
이 상태에서 프로그램을 보면 다음과 같은 추가 구성 요소의 내용을 보여 줍니다.

(주황색 테두리에서 생성된 4개의 구성 요소)

라이프 사이클의 개념
위에서 말한 바와 같이 파일에서 On Init의 인터페이스를 implements로 하고 클래스 정의에서 이를 implements로 하고 ngOn Init 방법을 실시한다.
어셈블리에는 라이프 사이클이라는 개념이 있으며 OnInit이 그 중 하나입니다.
라이프 사이클에 대한 자세한 내용은 부록에 나와 있으며 여기서는 On Init에 대해 간단히 설명하십시오.
OnInit
On Init에 대한 간단한 설명을 나열합니다.

라이프 사이클 중 하나인 Type Script 커넥터

구성 요소의 초기화 처리를 책임진다

ngOn Init 방법을 발표하고 On Init를 implements 클래스로 강제 적용하는 ngOn Init 방법

ngOn Init가 실행되는 시간은 구조기 이후

되다
물론 "그럼 초기화 처리는 구조기와 ngOn Init 중 어느 것이 좋을까"라며 일반적으로 Anglar는 ngOn Init에 적용해 초기화 처리를 한다.
이유는 다른 생명주기와 관계가 있기 때문에 여기서 사랑하지 않는다는 것이다.
총결산
길어졌기 때문에 당분간 여기서 단락을 짓고 본 보도를 총결하겠습니다.

Anglar CLI는 *.ts에서 구성 요소를 생성할 수 있음

구성 요소는

하이픈 문자로 구분된 파일 이름으로 생성

클래스 정의는'Upper 낙타 껍질 + Component'에서 정의

템플릿 레이블은 적용 + 하이픈 구분자로 정의

src/app/app.module.ts가 자동으로 업데이트되고 생성된 구성 요소 추가

단, 응용 프로그램에서 구성 요소를 호출하려면 src/app/app를 사용하십시오.component.> 태그 입력 필요

구성 요소는 생명주기의 개념을 가지고 Anglar CLI에서 생성된 구성 요소에서 기본적으로 ngOn Init 방법을 On Init 인터페이스의 실현으로 정의했다

Anglar 애플리케이션은 일반적으로 ngOn Init에서 초기화 처리

나는 다음에 인생 주기로 한번 보고 싶다.

Reference

이 문제에 관하여(Anglar CLI를 통한 구성 요소 생성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ksh-fthr/items/9f73fa161a1d7798def2

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Anglar CLI를 통한 구성 요소 생성

Reference

좋은 웹페이지 즐겨찾기