继上次之后，这次我们打算开始制作屏幕界面。

使用的框架

Angular Material: 角度材料

引入Angular Material

我們會按照公式的步驟進行導入。

安装

执行以下命令：
由于Angular Material 9系尚未正式发布，因此将使用@next来安装9系。

ng add @angular/material@next

由于某种原因，@angular/cdk版本是8系，因此需要单独升级。

npm install @angular/cdk@9.0.0-rc.8

画面的构建

添加头部信息

• ヘッダモジュールを作成します

Angular MaterialのToolbarをインポートします
exportsでHeaderComponentを使えるようにします

import { NgModule } from '@angular/core';
import { HeaderComponent } from './header.component';
import { MatToolbarModule } from '@angular/material/toolbar';

@NgModule({
  declarations: [
    HeaderComponent,
  ],
  imports: [
    MatToolbarModule,
  ],
  exports: [
    HeaderComponent,
  ]
})
export class HeaderModule { }

コンポーネントはとりあえずシンプルにしておきます

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {}

• ヘッダのHTMLを書きます

とりあえずタイトルだけのシンプルなものにします

<mat-toolbar>
    <span>てらしー　ブログ</span>
</mat-toolbar>

※将scss文件保留为空。

创建首页

TOPページ用のモジュールを作成します

import { NgModule } from '@angular/core';
import { TopComponent } from './top.component';

@NgModule({
  declarations: [
    TopComponent
  ],
})
export class TopModule { }

コンポーネントはとりあえずシンプルにしておきます

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

@Component({
  selector: 'app-top',
  templateUrl: './top.component.html',
  styleUrls: ['./top.component.scss']
})
export class TopComponent {
}

HTMLもとりあえずシンプルにしておきます

ようこそ

路由配置

• AppModuleでHeaderModuleとTopModuleをインポートします

方針として、画面や部品単位でモジュール化することでAppModuleを汚さないようにします。
ここでいろいろインポートしてしまうと、ビルド後のmain.jsのサイズが大きくなってしまい、初期起動が遅くなります

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HeaderModule } from './shared/header/header.module';
import { TopModule } from './top/top.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,

    HeaderModule,
    TopModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ルーティングファイルにルートパスの場合にTopComponentを表示するようにします

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TopComponent } from './top/top.component';


const routes: Routes = [
  { path: '', component: TopComponent },
];

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

• app.component.htmlを修正します

app-headerでHeaderComponentを表示します

でルーティングによるコンテンツの出し分けを行います

<app-header></app-header>
<router-outlet></router-outlet>

确认画面

以下是生成的画面。

总结

我们已经准备好创建屏幕了！下次我们会把主页做得更酷炫！！

使用Angular 9和Firebase创建博客（在Angular中使Firebase可见，同时在主页上显示Firebase Storage上的图片）