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

Posted 2023-03-13

【中文标题】在 Angular 2+ 中，使用路由器插座和嵌套组件有啥区别

【英文标题】：In Angular 2+ what is the difference between using a router outlet and nested components在 Angular 2+ 中，使用路由器插座和嵌套组件有什么区别

【发布时间】：2018-08-01 08:04:26

【问题描述】：

我正在与其他一些开发人员一起在一个团队中开发 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>

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

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

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

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

【问题讨论】：

你会使用路由来使用不同的组件

你会使用路由来使用不同的组件

【参考方案1】：

如果你的页面有动态内容，你会使用 router-outlet。

假设您有一个布局组件，它有一个工具栏、侧边栏和内容，与任何管理仪表板非常相似。在这种情况下，路由器插座是要走的路，因为页面将保持不变，而变化的部分是内容。

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

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

【讨论】：

所以在我同事的情况下，父母和孩子是直接相关的。父母有一个事情清单，孩子是其中一件事情的细节。我面临的问题是，现在我想直接进入一个特定孩子已经打开的视图，所以我似乎需要一个特定的路线，所以我倾向于更改他的代码以匹配我的父母/孩子路由设置，但是它们实际上是直接相关的，从您在此处所说的内容来看，这将是使用嵌套在组件方法中的组件的一个很好的理由。

这实际上是我构建应用程序的方式，但也许需要重构。理想的做法是与您的同事交谈并定义要遵循的标准，无论是否使用路线。