Angular 2中的父子关系

Question

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

问题是，我可以在小部件中调用 page2 的函数。但我无法访问 page1 的属性（它们未定义）。我认为打开小部件时 page1 会死掉。 Angular结构正常吗？我可以提供那个 page1 还在运行吗？

谢谢

在第 1 页视图中：

<page2></page2>

在 page2 视图中：

<widget><widget>

还有我的小部件的 .ts 文件。

_page2.Test2()  //it's ok

我可以通过这种方式访问​​。我在小部件的构造函数中定义了 _page2。 但我无法定义_page1。它给出了“无提供者”错误。

_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,
) {}

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

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

page1 HTML & TS

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

page2 HTML & 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(); });

应该这样做。