尝试在Angular 9和Firebase上创建博客3（修改Angular使其能够访问Firebase，并在首页展示Firebase Storage上的图片）

2 年 ago
清, 扬
2 minutes

在之前的一次会议中，我们已经完成了Angular Material的引入工作。

我希望在这次的TOP页面上放置一张图片，但是由于不能在代码中直接放置图片，所以我打算使用Firebase Storage。

为了引用Angular中的Firebase设置

Firebase设置

生成连接信息

    • 「Project Overview – アプリの追加」を選択

プラットフォームはwebを選択

image.png
    • 任意のニックネームをつけてアプリを登録します

Hostingはすでに作成済みのため、チェックなし

image.png
    ApiKey等の情報が生成されます

Angular端的处理

按照 @angular/fire 的设置步骤进行配置。

安装 AngularFire

我将安装@angular/fire。

npm install firebase @angular/fire --save

将Angular项目集成

    environments.ts（.prod.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 { }

编辑首页

将图像放置在Firebase Storage中。

Firebase Storage的启动

    FirebaseコンソールのStorageから「始める」を選択します
image.png

当显示有关安全规则的提示时，请确认后点击“下一步”。

image.png

由于被问及区域，选择 asia-northeast1（东京）作为选项。

image.png
    完了を押下するとバケットが作成されます

放置画像

images/top.jpgを配置します

image.png

设置安全规则

目前情况下，不会添加任何图像，而是将其设置为只读模式。

打开“规则”选项卡，将其更改为“仅允许读取”。
→ 这样就只能进行读取操作了。

image.png

从Angular侧引用Firebase Storage

进行 AngularFireStorage 的设置

    app.module.tsでAngularFireStorageModuleをインポート
・・・
import { AngularFireStorageModule } from '@angular/fire/storage';

@NgModule({
  ・・・
  imports: [
  ・・・
    AngularFireStorageModule,
    ・・・
    • top.component.tsを修正します

imgタグのURLは動的に取得します

・・・
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コンポーネントを作成し、枠だけ表示できるようにしてます

<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>

这样变成了这种感觉。

image.png

虽然我已经将标题调整为符合要求的菜单样式，但该菜单的链接状态尚未启用。

总结

这样博客感觉出来了！下一步，我想要处理博客列表页面和关于（自我介绍页面）的路由。

（更新）
尝试使用Angular 9和Firebase创建博客4（尝试实现屏幕切换）

bannerAds