Question

我知道这个标题看起来很熟悉;但是，我一直在努力寻找任何有同样问题的人。也许我不确定如何说出这个问题？说明如下：

使用案例

我有几个路由（在下面的示例中只有2个）设置每个路由到它们各自的组件 - 我将调用这些父组件。在主页面上，用户可以通过单击导航路由器的链接在父组件之间切换。这些父组件中的每一个都共享相同的形式。表单包含用于呈现每个父组件的相同设置，并且在父组件的路由之间导航时，表单的状态应该保持不变。因此，我将该表单抽象为自己的组件。要使此表单正确呈现，它必须调用我们的后端并检索列表。

问题：

当我打开页面（重定向到组件＆＃39; A＆＃39;）时，表单会完美加载。它正是我所期望的。但是当我导航到组件＆＃39; B＆＃39; angular似乎正在创建我的SharedFormComponent的新实例，并且永远不会在其上调用ngOnInit。当表单无法呈现时，这会导致可预测的错误，因为它没有数据列表来执行此操作。反过来也可以这样说。当页面初始化时，路由指向组件＆＃39; B＆＃39;形式完美。但是一旦我导航到路线＆＃39; / a＆＃39;表单无法正确呈现以杀死页面。

期望：

理想情况下，此表单将完全重复使用。它将保持相同的状态，所有它的属性等，但在它们之间导航时将重新呈现为不同父组件的子部分。我怎么能这样做？

如果无法做到这一点，我愿意妥协（有保留意见），并且有多个表格实例存在，让我记忆犹新。这怎么可以实现？

路线

const routes: Routes = [
    {path: '', pathMatch: 'full', redirectTo: '/a'},
    {path: 'a', component: AComponent},
    {path: 'b', component: BComponent}

A.component.ts

@Component({
    selector: "comp-a",
    template: "
        <shared-form-component> </shared-form-component>
        <hr>
        <p> other stuff A </p>
    "
})
export class AComponent {
    constructor() {}
}

B.component.ts

@Component({
    selector: "comp-b",
    template: "
        <shared-form-component> </shared-form-component>
        <hr>
        <p> other stuff B </p>
    "
})
export class BComponent {
    constructor() {}
}

SharedForm.component.ts

@Component({
    selector: "shared-form-component",
    providers: [ MyService ],
    template: "
        <shared-form-component> </shared-form-component>
        <hr>
        <p> other stuff </p>
    "
})
export class SharedFormComponent implements OnInit {
    data: Datum[];
    constructor(private service: MyService) {}
    ngOnInit() {
        this.service.fetchData().subscribe(data => {
            this.data = data;
        });
    }
}

App.component.ts

@Component({
    selector: "shared-form-component",
    template: "
        <a [routerLink]=["/a"]> a </>
        <a [routerLink]=["/b"]> b </>
        <hr>
        <router-outlet> </router-outlet>
    "
})
export class AppComponent {
    constructor() {}
}

编辑：修复组件类名称。

Answer 1

我觉得自己像个公爵夫人。这个问题与ngOnInit完全无关;对堆栈跟踪进行更仔细的检查后发现异常与其他事件的时间安排有关......完全是我的错。道歉。

角2;在几个父组件中重用一个子组件相同的形式，保持状态

1 个答案: