초보자용 각진 소재 (2부)

초보자용 각진 소재 (2부)

반응형

이것은 초보자용 Angular Material 시리즈의 2부입니다. 첫 번째 기사에서, 우리는 새로운 각도 응용 프로그램을 만든다.

이 파트에서는 애플리케이션에 사용되는 모든 재료 구성 요소를 포함하는 새로운 재료 모듈을 만드는 데 초점을 맞출 것입니다. Angular Material을 처음 접하시는 분들은 먼저 이 시리즈의 첫 번째 부분인 Angular Material for Beginers(1부)를 살펴보시기 바랍니다.

1단계:

먼저 프로그램에 새 모듈을 만들어야 합니다. (여기서 재료 모듈이라고 이름 붙였습니다.)

ng g m material or ng generate module material

./src/app/material/module.ts 파일 안에는 다음과 같은 코드가 있습니다.

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; @NgModule({ declarations: [], imports: [ CommonModule ], exports: [] }) export class MaterialModule { }

2단계:

다음 재료 UI 구성 요소를 사용할 예정입니다.

매트버튼모듈

매트콘모듈

따라서 이 두 모듈을 새로 만든 ./src/app/material/material.module.ts 파일에 추가해야 합니다.

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MatIconModule } from '@angular/material/icon'; import { MatButtonModule } from '@angular/material/button'; @NgModule({ declarations: [], imports: [ CommonModule, MatButtonModule, MatIconModule ], exports: [ MatButtonModule, MatIconModule ] }) export class MaterialModule { }

여기서는 다른 모듈에서도 사용할 수 있기 때문에 모든 모듈을 수출합니다.

3단계:

이제 자재 모듈이 준비되었습니다. 그런 다음 ./src/app/material/module.ts 파일을 기본값 ./src/app/app.module.ts 파일로 가져와야 합니다.

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

이제 각도 재료가 준비되었습니다. 예를 하나 들어봅시다.

4단계:

그런 다음 재료 UI 구성 요소를 사용하도록 ./src/app/app.component.html 파일을 업데이트합니다.

Angular Material Button Basic Primary Accent Warn Disabled Icon more_vert home menu favorite open_in_new

./src/app/app.css 파일에 다음 스타일을 추가합니다.

.container{ margin-top: 50px; margin-left: 50px; } .section { display: table; } .example-button-row { display: table-cell; width: 490px; } .example-button-row .mat-button-base { margin: 8px 8px 8px 0; }

중요: 재료 아이콘을 사용하려면 공식 아이콘 글꼴을 ./src/index.htmfile에 추가하십시오.

이제 응용 프로그램을 사용할 준비가 되었습니다.

5단계:

응용 프로그램 실행

ng serve -o

브라우저에서 프로젝트가 열립니다.

결론

다음은 응용 프로그램에서 사용할 모든 재료 UI 구성 요소를 포함하여 재료 모듈을 만드는 단계입니다. 새 재료 모듈을 만드는 방법은 Angular Material에서 가져올 내용을 단일 파일로 중앙 집중화하는 것입니다.

이것이 당신에게 유용하고 도움이 되기를 바랍니다. 해피 코딩!!!

from http://it-ground.tistory.com/183 by ccl(A) rewrite - 2021-09-16 04:26:58