Question

我有一个父级组件，包含四个选项卡，每个选项卡都是单个组件。如果使用[hidden]，则在组件之间切换时，我不会丢失数据，但是当我使用* ngIf时，我会丢失填充在组件输入值内部的数据。我们如何避免丢失数据？

Answer 1

这是因为当您使用[hidden]时，包含数据的组件不会被销毁，只是不会显示。当您使用ngIf时，组件将被销毁，您的数据也将被销毁。

为避免这种情况，您可以使用服务来跟踪数据。服务是可以散布数据的类，即使所有组件都被破坏，该服务仍将拥有数据。

服务可以像这样简单：

import { Injectable } from "@angular/core";

@Injectable()
export class ExampleService {
    someDataYouWantToKeep:string = "data"
    someOtherDataYouWantToKeep:number = 1
}

然后在组件中可以像这样使用它：

import { Component, OnInit } from '@angular/core';
import { ExampleService } from '<path to file>';


@Component({
    selector: 'app-setup',
    templateUrl: './setup.component.html',
    styleUrls: ['./setup.component.scss']
})
export class ExampleComponent implements OnInit {

    constructor(private service: ExampleService) { }


    ngOnInit() {
        console.log(this.service.someDataYouWantToKeep)
        this.service.someOtherDataYouWantToKeep = 2
    }
}

在构造函数中，您可以向组件注入private service: ExampleService，然后与this.service一起使用。

Answer 2

正如@mika所说，如果您想避免丢失数据，则有两种选择：

请勿使用*ngIf指令，而应使用[hidden]
使用斜角ngOnDestroy钩子将数据保存在某处。此解决方案可能会导致性能问题，具体取决于您如何保存（本地存储，数据库等）

在Angular4中的两个组件之间切换时，如何保留或避免丢失数据

2 个答案: