<router-outlet> 是否激活了我没有为其编写标记的组件？

Question

我目前正在通读 Angular 入门文档中的代码： https://angular.io/generated/live-examples/getting-started-v0/stackblitz.html

我看到 app.component.html 中的 top-bar.component 是如何因 <app-top-bar></app-top-bar> 而呈现的。但是，我看不到 product-list.component 的渲染位置。我看到的唯一选择是 <router-outlet></router-outlet>。

在Router Outlet Docs中，它说：

A router outlet will emit an activate event any time a new component is being instantiated, and a deactivate event when it is being destroyed.

这是否意味着路由器插座在实例化后激活 product-list.component，导致它在屏幕上呈现？如果是这样，为什么顶部的栏被留在路由器出口外面？为什么不让路由器插座激活顶部栏？

这里是app.component.html:

<app-top-bar></app-top-bar>

<div class="container">
  <router-outlet></router-outlet>
</div>

Answer 1

通常，如果您像 <app-top-bar></app-top-bar> 这样调用选择器，那么它将调用该组件，但在这种情况下，下面的代码正在实例化产品组件：

 RouterModule.forRoot([
      { path: '', component: ProductListComponent },
    ])

所以，<router-outlet></router-outlet> 正在激活产品组件

Answer 2

您可以通过两种不同的方式调用 "html" 到您的主页面 (app.component.html)。

第一个是将 "html" 放入您的索引中，您无法更改它，您将始终看到该页面。

在你的组件中你有这样的代码：

@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})

您已在 html:

中使用 "selector" 进行调用

<app-header></app-header>

router-outlet是使用单个标签，所以你可以根据路由更改HTML。

在app-module中需要导入product-list.component，例如：

import { HeaderComponent } from './header/header.component';

然后您必须在变量中定义路由：

const routes: Routes= [
{path: '', redirectTo:'/clientes', pathMatch: 'full'},
{path: 'product', component: NameComponent}];

<router-outlet> 是否激活了我没有为其编写标记的组件？

Is the <router-outlet> activating my component which I did not write a tag for?

router-outlet

angular