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

Question

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

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

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

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

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

child 看起来像这样：

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

虽然此方法适用于我的特定用例，但请务必注意，在我的用例中，child 元素并未从 parent 获取大量数据。在我的设置中，任何需要从 parent 到 child 的通信都是通过共享服务完成的。

相比之下，我的一个同事是这样设置他的类似结构的：

注意，我不会给你看他的路线，因为只有一条路线，没有parent/child关系。这里是 parent html:

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

现在是 child:

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

这对他有用，因为他必须将大量数据传递到 child。显然这两种方法都有它们的 advantages/disadvantages，但它们到底是什么？

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

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

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

Answer 1

如果您的页面包含动态内容，您将使用 router-outlet。

假设您有一个布局组件，它有一个工具栏、侧边栏和内容，与任何管理仪表板非常相似。在那种情况下，router-outlet 是正确的选择，因为页面将保持不变，变化的部分是内容。

如果两者直接相关，例如产品列表>产品详细信息关系，则应使用父>子方式。

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

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

In Angular 2+ what is the difference between using a router outlet and nested components

angular-routing

angular-components

angular