创建 Angular Material 标准组件结构

2 年 ago
文, 翔
3 minutes

這篇文章的目的

    • Angular Material で画面を構成する際の標準的なコンポーネントを構成します。

 

    • 共通サービスを組み込みます。

 

    HttpClientを組み込みます。
image

? 从这里开始，我们将以以下文章的内容为前提。

    Angular Material 導入

添加组件

ng generate component header
ng generate component main

app.component.htmlにヘッダーコンポーネントとルータを組み込みます。

app组件的html文件

<app-header></app-header>
<router-outlet></router-outlet>
    ルータからメインコンポーネントが読み込まれるよう設定します。

app-routing.module.ts的释义是应用程序路由模块。

import { MainComponent } from './main/main.component';

const routes: Routes = [
  {path: '**', component: MainComponent},
];
    ヘッダーコンポーネントを設定します。

header.component.html的同义短语：

<div class="toolbar" role="banner">
  <span>&nbsp;&nbsp;&nbsp;</span>
  <mat-icon>thumb_up_alt</mat-icon>
  <span>&nbsp;&nbsp;&nbsp;</span>
  <span>Welcome</span>
  <div class="spacer"></div>
  <span>MENU</span>
  <span>&nbsp;&nbsp;&nbsp;</span>

</div>
    メインコンポーネントにボタンを付けます。

主要的组件.html

<div class="content" role="main">
  <p>mainworks !</p>
  <button mat-raised-button color="primary" (click)="buttonClick()">Login</button>
</div>

增加服务

ng generate service common

增加 HttpClient

app.module.ts -> 应用程序模块.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.module';
import { HeaderComponent } from './header/header.component';
import { MainComponent } from './main/main.component';
import { HttpClientModule } from '@angular/common/http';  // add
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    MainComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule,
    HttpClientModule,   // add
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
    • サービスモジュールにHttpClientを組み込みます。

 

    下記のようにコンストラクタでHttpClientを定義することによりAngularによって実体が導入されます。

常见服务.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class CommonService {
  constructor(
    private http: HttpClient,
  ) { }
  func01(){
    console.log("func01");
  }
}
    • メインコンポーネントに共通サービスを組み込みます。

 

    下記のようにコンストラクタでCommonServiceを定義することによりAngularによって実体が導入されます。

主要组件.ts

import { Component, OnInit } from '@angular/core';
import { CommonService } from '../common.service';
@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {
  constructor(
    private commonService:CommonService,
  ) { }
  ngOnInit(): void {
  }
  buttonClick(){
    this.commonService.func01();
  }
}

启动本地服务器

PS C:\home\git\material.angular.github> ng serve --o
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size   
vendor.js             | vendor        |   5.61 MB | 
polyfills.js          | polyfills     | 315.34 kB | 
styles.css, styles.js | styles        | 285.62 kB | 
main.js               | main          |  81.74 kB | 
runtime.js            | runtime       |   6.54 kB | 

                      | Initial Total |   6.29 MB   

Build at: 2022-07-01T07:40:26.403Z - Hash: a79e881bee5051f2 - Time: 3961ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


√ Compiled successfully.
image

?先决条件的文章

    Angular Material 導入

? 相关文章 )

    • Angular Material datepicker 導入

 

    • Angular Material Progress spinner 導入

 

    • Angular Material 動的Tree 導入

 

    StackBlitzの導入からGitHub同期まで

?这里是GitHub。

image

?参考链接

    • https://material.angular.io/components/categories

 

    https://angular.io/guide/setup-local
bannerAds