3
respostas

Código repetido...

Eu terei que fazer upload de arquivos e vejo que terei que fazer upload em dois lugares diferentes, neste caso eu imagino que o certo seria eu criar um "XXX" (entendo que seria um componente, mas estou inseguro...) Gostaria de saber qual seria a recomendação neste caso. Idealizo gerar um código responsável em importar as libs necessárias e apenas injeta-lo nos lugares onde terei que fazer upload. Qual seria a melhor abordagem? Ou o certo seria repetir a função de seleção do arquivo e upload onde for necessário?

Eu gostaria de saber também se caso for um componente (o que eu imagino) gero ele pelo ionic cli msm?

Obs. A uns dias atrás eu nem sabia o que era ES6, muito menos TS, agora ja levantei a stack completa backend em Node, ja esta funcionando, só quero tunnar ela e deixar o código simples... Estou em curva ainda... talvez seja uma dúvida básica que comi bola nos treinamentos... vlw

3 respostas

Mais ou menos isso que eu gostaria...

Este aqui foi o "componente" que eu criei

import { Camera, CameraOptions } from '@ionic-native/camera';

export class CameraManager {
    public picture: string;
    private _camera: Camera

    constructor(){
        this.picture = "";
        this._camera = new Camera();
    }

    takePicture() {
        const options: CameraOptions = {
            quality: 80,
            targetWidth: 200,
            targetHeight: 200,
            destinationType: this._camera.DestinationType.DATA_URL,
            encodingType: this._camera.EncodingType.JPEG,
            mediaType: this._camera.MediaType.PICTURE
        }

        this._camera.getPicture(options).then((imageData) => {
            this.picture = 'data:image/jpeg;base64,' + imageData;
        }, (err) => {
            alert("Opss... Algo errado");
        });
    }

    getImgFromGallery() {
        this._camera.getPicture({
            sourceType: this._camera.PictureSourceType.SAVEDPHOTOALBUM,
            destinationType: this._camera.DestinationType.FILE_URI,
        }).then((imageData) => {
            this.picture = imageData;
        }, (err) => {
            alert(err);
        });
    }
}

Quero que ele manipule a minha camera... no .ts da página eu idealizo ter apenas isso:

  takePicture() {
    this._camera.takePicture();
    this.child.picture = this._camera.picture;
  } 

  getImgFromGallery() {
    this._camera.getImgFromGallery();
    this.child.picture = this._camera.picture;
  } 
`

E na página em sí tenho isso:

    <ion-item text-center>
      <ion-img [src]="child.picture" *ngIf="child.picture" width="150" height="150" (click)="takePicture()"></ion-img>
    </ion-item>

    <ion-item text-center>
      <ion-img [src]="child.picture" *ngIf="child.picture" width="150" height="150" (click)="getImgFromGallery()"></ion-img>
    </ion-item>

Ele bate a foto e carrega alguma imagem, mas não vejo a imagem carregada na tela... goataria de saber o que pode ser e saber se isso seria recomendável...

Não sei se estaria correto colocar a new Camera no construtor...

Oi Mauricio, tudo bem? Duplicar o código necessário para resolver um problema no inicio faz sentido, pra ver se funciona realmente dessa forma mas depois o melhor caminho é realmente extrair esse código para onde faça sentido e utiliza-lo onde for necessário.

Sim, no caso de Angular 2, Ionic 2, que usam a mesma ideia de componentes, sim, criar um componente para extrair o código repetido faz bastante sentido.

Esse código que postou, já se trata do componente criado? Está tendo algum problema com ele ou tudo funciona normalmente?