Question

我有两个页面和小部件。我使用选择器调用page1中的page2，并且我的小部件以相同的方式在第2页中打开。

问题是，我可以在小部件中调用page2的功能。但我无法访问page1的属性（它们未定义）。我认为第1页在小部件打开时会死亡。角度结构是否正常？我可以提供该页面1还在运行吗？

谢谢

第1页视图中的

：

<page2></page2>

第2页视图中的

：

<widget><widget>

我的小部件的.ts文件。

_page2.Test2()  //it's ok

我可以这样访问。我在widget的构造函数中定义了_page2。但是我无法定义_page1。它给了“没有提供者”＃39;错误。

_page1.Test1()  // this is not possible.

这可能是什么？两页有NgModule。 Page2没有抛出提供程序错误，但是page1做了它。

Answer 1

我认为您的代码应如下所示？

<强> app.html

<page1></page1>

<强> page1.html

<page2></page2>

<强> page2.html

<widget1></widget1>
<widget2></widget2>

在这种情况下，您有几种解决方案。首先，将第1页的引用注入您的小部件，如此

constructor(
  @Inject(forwardRef(() => PageOneComponent)) private page1: PageOneComponent,
) {}

在有人告诉你不要这样做之前：是的，这是一种不好的做法，因为它会产生强烈的依赖性。但这回答了这个问题。

第二个选项是创建视图子项并动态分配它们的值：

第1页HTML＆amp; TS

<page2 #p2></page2> @ViewChild(PageTwoComponent) p2: PageTwoComponent;

第2页HTML＆amp; TS

<widget1 #w1></widget1> <widget2 #w2></widget2> @ViewChild(WidgetOneComponent) w1: WidgetTwoComponent; @ViewChild(WidgetTwoComponent) w2: WidgetTwoComponent;

小部件TS

page1: PageOneComponent;

现在，在您的第一个组件中，您可以执行

this.p2.w1.page1 = this; this.p2.w2.page1 = this;

但这很糟糕，你不应该这样做。

第三种解决方案，使用主题服务。

<强>服务

export class MyService { onEvent: Subject<any> = new Subject(); propagate() { this.onEvent.next(null); } }

<强>小窗口

constructor(private service: MyService) { // you can call service.propagate(); }

第1页

// Subscribe to the propagation this.service.onEvent.subscribe(() => { this.myMethod(); });

这应该是这样做的方式。

Angular 2中的父子关系

1 个答案: