angular - 将拍摄的照片移动到另一个组件

Question

我创建了一个应用程序，点击按钮后，相机启动。如果我拍照，我希望它出现在一个新窗口中，并减少了其他进程的按钮。我提供服务，几乎一切都还好，但如果我拍照，我不会被重新路由到第二个组件，我应该在那里看到带有我的自定义按钮的图片。我知道，我有一个错误，但我不知道在哪里。

第一个组件：

import { takePicture, requestPermissions } from "nativescript-camera";
import { ImageAsset } from "tns-core-modules/image-asset";
import { ZdjecieService } from "../zdjecie.service";
declare var android: any;
@Component({
    selector: "ns-glowna",
    templateUrl: "./glowna.component.html",
    styleUrls: ["./glowna.component.css"]
})
export class GlownaComponent implements OnInit {
    public saveToGallery: boolean = false;
    public allowsEditing: boolean = false;
    public keepAspectRatio: boolean = true;
    public width: number = 320;
    public height: number = 240;
    public cameraImage: ImageAsset;
    public actualWidth: number;
    public actualHeight: number;
    public scale: number = 1;
    public labelText: string;
    constructor(private service: ZdjecieService) {}
    ngOnInit() {}
    onTakePictureTap(args) {
        requestPermissions().then(
            () => {
                takePicture({
                    width: this.width,
                    height: this.height,
                    keepAspectRatio: this.keepAspectRatio,
                    saveToGallery: this.saveToGallery,
                    allowsEditing: this.allowsEditing
                }).then(
                    (imageAsset: any) => {
                        this.cameraImage = imageAsset;
                        let that = this;
                        imageAsset.getImageAsync(function(nativeImage, ex) {
                            if (ex instanceof Error) {
                                throw ex;
                            } else if (typeof ex === "string") {
                                throw new Error(ex);
                            }
                        });
                    },
                    error => {
                        console.log("Error: " + error);
                    }
                );
            },
            () => alert("permissions rejected")
        );
    }
}

第二部分：

import { GlownaComponent } from "../glowna/glowna.component";
import { ZdjecieService } from "../zdjecie.service";

@Component({
    selector: "ns-check-photo",
    templateUrl: "./check-photo.component.html",
    styleUrls: ["./check-photo.component.css"]
})
export class CheckPhotoComponent implements OnInit {
    cameraImage: any;

    constructor(private photoService: ZdjecieService) {}

    ngOnInit() {
        this.cameraImage = this.photoService.camImage;

        this.getImage();
    }
    getImage(): void {
        this.photoService
            .getPhoto()
            .subscribe(cameraImage => (this.cameraImage = cameraImage));
    }
}

HTML第二个组件

  <ScrollView>
    <Image [src]="cameraImage" stretch="aspectFit" margin="10"></Image>
    <Button text="next"></Button> </ScrollView
></StackLayout> 

服务：

import { GlownaComponent } from ".//glowna/glowna.component";
import { Observable, of } from "rxjs";
@Injectable({
    providedIn: "root"
})
export class ZdjecieService {
    camImage: any;
    getPhoto(): Observable<any> {
        this.camImage = GlownaComponent;
        return this.camImage;
    }
    constructor() {}
}

路由：

import { NgModule } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { Routes } from "@angular/router";

import { GlownaComponent } from "./glowna/glowna.component";
import { CheckPhotoComponent } from "./check-photo/check-photo.component";

const routes: Routes = [
    { path: "", component: GlownaComponent },
    { path: "checkPhoto", component: CheckPhotoComponent }
];

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

标签： angularnativescriptnativescript-angular