关于angular：<router-outlet>是否激活了我没有为其编写标签的组件？

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

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

我看到在app.component.html中，由于</app-top-bar>而呈现top-bar.component的方式。但是，我看不到product-list.component的渲染位置。我看到的唯一选择是通过<router-outlet></router-outlet>。

在路由器出口文档中，显示：

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.

这是否意味着路由器outlets一旦实例化就会激活product-list.component，从而使其在屏幕上呈现？如果是这样，为什么顶部栏杆留在路由器电源outlets的外面？为什么不让路由器outlets激活顶部栏呢？

这里是app.component.html：

1
2
3
4

</app-top-bar>

<router-outlet></router-outlet>

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

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

在您的组件中，您会看到类似以下代码的内容：

1
2
3
4
5

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

您在html中使用"选择器"进行呼叫：

1	</app-header>

router-outlet将使用单个标签，因此您可以根据路线更改HTML。

在应用程序模块中，您需要导入product-list.component，例如：

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

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

1
2
3

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

通常，如果像</app-top-bar>这样调用选择器，则它将调用该组件，但是在这种情况下，以下代码实例化了产品组件：

1
2
3

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

因此，<router-outlet></router-outlet>正在激活产品组件