Question

我正在与一些其他开发人员合作开发Angular 5应用程序，我意识到我设置组件的方式与团队中其他人的方式不同。我不知道哪种方式更好，甚至两种方式之间的真正区别是什么。这就是我在做的事情：

在我的app-routing.module.ts中，我设置了一些路由：

const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      { path: 'child', component: ChildComponent }
    ]
  }
]

然后我的父模板看起来像这样：

<div>
  ... a bunch of html
  <router-outlet></router-outlet>
  ... more html
</div>

孩子看起来像这样：

<div>
  ... irrelevant html
</div>

虽然这个方法适用于我的特定用例，但重要的是要注意在我的用例中，子元素没有从父级获取大量数据。在我的设置中，任何需要从父母传达给孩子的东西都是通过共享服务完成的。

相比之下，这就是我的同事为他的类似结构设置的方式：

注意，我不会告诉你他的路线，因为只有一条路线，没有父/子关系。这是父html：

<div>
  ...some html
  <app-child [child_referenceable_data_object]="parent_data_object"></app-child>
  ...more html
</div>

现在这里是孩子：

<div>
  ...html
  <div [ngClass]="child_referenceable_data_object.class">whatever</div>
  ...more html
</div>

这适合他，因为他必须将大量数据传递给孩子。显然这两种方法都有其优点/缺点，但它们究竟是什么？

编辑。我刚刚意识到我并没有真正解决我的问题，所以我将在这里进行说明。我上面显示的是系统当前是如何设置的。在我的同事代码中，父亲是一个事物列表，孩子是其中一个事物的详细视图。只有当您单击列表中的某个元素时，子项才会显示。

我现在需要打开我的同事页面，其中一个孩子已经打开。因此，我似乎需要修改他的代码以使用我在代码中使用的嵌套路由，但是由于他将数据从父级传递给子级的方式很难。

他目前正在使用服务获取父列表的所有数据列表，然后将该数据的一个元素传递给子级。我认为某种服务也是我的解决方案，但不确定。

Answer 1

如果您的网页包含动态内容，则可以使用路由器插座。

想象一下，你有一个布局组件，它有一个工具栏，侧边栏和内容，就像任何管理仪表板一样。在这种情况下，路由器插座是可行的方法，因为页面将保持不变，而更改的部分是内容。

父母＆gt;如果两者直接相关，则应使用子方式，例如产品列表＆gt;产品细节关系。

请注意，两种方式都相似，如果您没有通过该服务获取信息，则表示您的服务或数据处理和传递方式存在问题。

在Angular 2+中，使用路由器插座和嵌套组件之间的区别是什么

1 个答案: