咨询热线 ：
028-86922220
×
01
关于我们

公司简介

发展历程

02
服务项目

高端网站建设

微信开发

APP开发

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03
小程序开发

小程序开发

功能应用

客户案例

04
案例展示

网站建设案例

小程序案例

电商平台案例

APP案例

系统平台案例

05
建站动态

什邡网站建设

什邡网站设计

什邡网站营销

什邡小程序

06
联系我们

公司地址

人才招聘

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220
  ` }) export class AppComponent implements OnInit {   session = this.supabase.session;   constructor(private readonly supabase: SupabaseService) { }   ngOnInit() {     this.supabase.authChanges((_, session) => this.session = session);   } }

完成后，在终端窗口中运行它：

npm run start

然后打开浏览器到 http://localhost:4200，你应该会看到完整的应用程序。

怎么使用MemFire Cloud构建Angular应用程序

实现：上传头像及更新用户信息

每个 MemFire Cloud项目都配置了存储，用于管理照片和视频等大文件。

创建上传小组件

让我们为用户创建一个头像，以便他们可以上传个人资料照片。使用Angular CLI 命令创建AvatarComponent 。ng g c avatar

src/app/avatar/avatar.component.ts

import {Component, EventEmitter, Input, Output} from '@angular/core';
import {SupabaseService} from "../supabase.service";
import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser";

@Component({
  selector: 'app-avatar',
  template: `
    

      

    
                    {{uploading ? 'Uploading ...' : 'Upload'}}                      `, }) export class AvatarComponent {   _avatarUrl: SafeResourceUrl | undefined;   uploading = false;   @Input()   set avatarUrl(url: string | undefined) {     if (url) {       this.downloadImage(url);     }   };   @Output() upload = new EventEmitter();   constructor(     private readonly supabase: SupabaseService,     private readonly dom: DomSanitizer   ) { }   async downloadImage(path: string) {     try {       const {data} = await this.supabase.downLoadImage(path);        if (data instanceof Blob) {         this._avatarUrl = this.dom.bypassSecurityTrustResourceUrl(           URL.createObjectURL(data)         );       }     } catch (error:any) {       console.error('下载图片出错: ', error.message);     }   }   async uploadAvatar(event: any) {     try {       this.uploading = true;       if (!event.target.files || event.target.files.length === 0) {         throw new Error('必须选择要上载的图像。');       }       const file = event.target.files[0];       const fileExt = file.name.split('.').pop();       const fileName = `${Math.random()}.${fileExt}`;       const filePath = `${fileName}`;       await this.supabase.uploadAvatar(filePath, file);       this.upload.emit(filePath);       this.downloadImage(filePath)     } catch (error:any) {       alert(error.message);     } finally {       this.uploading = false;     }   } }

然后我们可以在AccountComponenthtml 模板的顶部添加小部件：

src/app/account/account.component.ts

import {Component, Input, OnInit} from '@angular/core';
import {Profile, SupabaseService} from "../supabase.service";
import {Session} from "@supabase/supabase-js";

@Component({
  selector: 'app-account',
  template: `
      
    
    
      

        邮箱
        
      

      

        名称
        
      

      

        网址
        
      


      

        
      


      

        
          退出登录
        
      

    
  `
})
export class AccountComponent implements OnInit {
  loading = false;
  profile: Profile | undefined;

  @Input() session: Session | undefined;

  constructor(private readonly supabase: SupabaseService) { }

  ngOnInit() {
    this.getProfile();
  }

  async getProfile() {
    try {
      this.loading = true;
      let {data: profile, error, status} = await this.supabase.profile;

      if (error && status !== 406) {
        throw error;
      }

      if (profile) {
        this.profile = profile;
      }
    } catch (error:any) {
      alert(error.message)
    } finally {
      this.loading = false;
    }
  }

  async updateProfile(username: string, website: string, avatar_url: string = '') {
    try {
      this.loading = true;
      await this.supabase.updateProfile({username, website, avatar_url});
      alert("修改成功")
    } catch (error:any) {
      alert(error.message);
    } finally {
      this.loading = false;
    }
  }

  async signOut() {
    await this.supabase.signOut();
  }
}

“怎么使用MemFire Cloud构建Angular应用程序”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！


当前标题：怎么使用MemFireCloud构建Angular应用程序
URL网址：http://tjjierui.cn/article/piggjd.html

其他资讯

分享至：
关于我们
公司简介 发展历程
服务项目
高端网站建设 小程序开发 APP开发 网络营销
建站知识
行业新闻 建站学堂 常见问题
联系我们
公司地址 人才招聘
成都 什邡
电话：028-86922220
地址：成都市太升南路288号锦天国际A幢1002号
电话：028-86922220
地址：德阳市什邡市顺河路物华南苑B区
友情链接： 成都标志设计   定制网站   POLO衫定制   温江网站建设   成都外贸网站建设公司   成都建网站   软文推广公司   礼品纸盒包装设计   成都广告设计   温江网站制作   
版权所有：青羊区美图云海设计工作室（个体工商户） 蜀ICP备2025119305号-5
在线咨询
服务热线
服务热线：028-86922220
TOP