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中，它表示：

路由器插座在任何新组件出现时都会发出激活事件正在实例化，并在激活时将其停用毁了。

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

这里是app.component.html：

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

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

Answer 1

您可以通过两种不同的方式将“ html”调用到主体页面（app.component.html）。

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

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

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

您已在HTML中使用“选择器”进行呼叫：

<app-header></app-header>

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

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

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

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

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

Answer 2

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

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

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

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

2 个答案: