지난번 에서 Angular Material의 도입까지 실시했습니다.

이번에는 TOP 페이지에 이미지를 넣고 싶습니다만, 이미지를 코드 내에 배치하는 것은 갈 수 없기 때문에 Firebase Storage를 사용하려고합니다.

Angular에서 Firebase를 참조하기위한 설정

Firebase 측 설정

연결 정보 생성

Project Overview - 앱 추가를 선택합니다.

플랫폼은 웹을 선택

임의의 별명을 붙여 앱을 등록합니다.

Hosting이 이미 작성되었으므로 확인되지 않음

ApiKey와 같은 정보가 생성됩니다

Angular측의 대응

@angular/fire 설정 절차 에 따라 설정하기

AngularFire 설치

@angular/fire 설치

npm install firebase @angular/fire --save

Angular 프로젝트에 내장

environments.ts (.prod.ts도)에 생성 된 연결 정보를 등록합니다

src/environments/environments.ts

export const environment = {
  production: true,
  firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'
  }
};

app.module.ts에서 AngularFireModule 가져 오기

・・・
import { environment } from 'src/environments/environment';
import { AngularFireModule } from '@angular/fire';

@NgModule({
    ・・・
  imports: [
    ・・・
    AngularFireModule.initializeApp(environment.firebase),
    ・・・
  ],
    ・・・
})
export class AppModule { }

TOP 페이지 편집

Firebase Storage에 이미지 넣기

Firebase Storage 시작

Firebase 콘솔의 Storage에서 시작을 선택합니다.



- 보안 규칙에 대한 안내가 표시되므로 확인하면 "다음"을 누르십시오.



- 지역을 들으려면 asia-northeast1(東京)

완료를 누르면 버킷이 생성됩니다.

이미지 배치

images/top.jpg 배치

보안 규칙 설정

현재 이미지를 추가하지 않으므로 읽기 전용이되도록 설정합니다.

규칙 탭을 열고 allow read;로 변경합니다.
→ 이것으로 읽기만 할 수 있게 됩니다

Angular 측에서 Firebase Storage 참조

AngularFireStorage 설정하기

app.module.ts에서 AngularFireStorageModule 가져 오기

src/app/app.module.ts

・・・
import { AngularFireStorageModule } from '@angular/fire/storage';

@NgModule({
  ・・・
  imports: [
  ・・・
    AngularFireStorageModule,
    ・・・

top.component.ts 수정

img 태그의 URL은 동적으로 검색됩니다.

src/app/top/top.component.ts

・・・
export class TopComponent implements OnInit {
  imgUrl: string;

  constructor(private storage: AngularFireStorage) {}

  ngOnInit() {
   this.storage.ref('images/top.jpg').getDownloadURL().subscribe(image => {
      this.imgUrl = image;
    });
  }
}

html 파일 수정

그렇게하기 위해 알림과 Twitter 구성 요소를 만들고 프레임 만 표시 할 수 있습니다.

src/app/top/top.component.html

<div class="blog-title">
  <h1>てらしー　ブログ</h1>
  <img [src]="imgUrl">
</div>
<div>
  <div class="contents">
    <app-top-news></app-top-news>
  </div>
  <div class="contents">
    <app-top-twitter></app-top-twitter>
  </div>
</div>

이런 느낌이 들었습니다.

※헤더도 그것 같은 메뉴로 했습니다만, 링크는 되어 있지 않은 상태입니다.

요약

이것으로 블로그 같아졌습니다!
다음 번은 블로그 일람 화면과 About(자기 소개 페이지)에의 라우팅당을 할까라고 생각합니다.

(추기)
Angular9와 Firebase에서 블로그를 만들어 보는 4 (화면 전환을 할 수 있도록 해본다)