@Component+router-outlet 是在 Angular 7 中拥有可重用模板的唯一方法吗？

Question

我遵循了关于路由的官方教程 (https://angular.io/guide/router) 和其他一些来源，我不确定 @Component 是否是简单模板的正确方法。

我的目标是拥有一个 search-bar 组件，例如我可以将其作为第一部分放置在登录页面上，然后当用户不在登录页面上时 - 将其放置在 header 中，也许甚至在别处。基本上 stand-alone 可以在任何地方独立运行的东西。

有这个教程apphttps://stackblitz.com/angular/empolopovbx 他们使用 named router outlets 创建名为 popup 的出口，其中将包含用于创建 crisis message 的组件。现在一切都很好，但整个机制的工作基本上就像打开 2 页（参考 Angular 的 routes/components）并将一个放在主要（未命名）出口和第二个（危机消息）在所述 popup出口。

这转换为 link 如下：

site/superheroes(弹出:撰写)

所以对于每个命名的路由器出口，我会在 link.

中得到 (router-outlet-name:component)

然后我想 - 当我在 parent-components 中有多个出口并且想在整个应用程序中重用任意数量的组件时，这真的是一种方法吗？由于我对 Angular 还很陌生，这让我很困扰——我是不是误解了命名路由器插座的用法？它们甚至应该用在 "high numbers" 中吗？例如这样的页面：

app.component:

<header>...</header>
<router-outlet>
<footer>...</footer>

landing.component:

<section class="landing-swiper">
    ...
</section>
<section class="landing-search">
    <router-outlet name="search-bar">
<section>
<section class="landing-news">
    <router-outlet name="news-window">
<section>
<section class="landing-contact">
    <router-outlet name="contact-form">
<section>

所以基本上 app.component 是给我们 header 和页脚的主要页面，我想将目标网页 (landing.component) 作为内容插入其中。

但是landing.component也用了一些其他的（也可以用在其他地方，比如contact.component这里会插到routercontact-form，也会放在 "About Company" 页）。

所以这里的问题是 - 我是否正确理解架构，当我使用很多 router-outlets 时，我会得到那么长的 link 是否正常？？

Answer 1

我不确定你的确切要求，但听起来你不应该在这种情况下使用路由器插座。

路由器出口适用于 "parent" 组件有多个 "child" 组件，并且希望一次显示一个，它显示的那个取决于路由。

我认为在一个 Angular 应用程序中有两个以上的路由级别是很不寻常的。可能，但很不寻常。

这通常仅在子组件代表应用程序的一个子部分时使用，并且有多个这样的子部分在不同时间显示在一个位置。

如果您只想让一个组件显示在另一个组件中，那么您应该在使用子组件的 "selector"

的父模板中放置一个 html 标签

因此，例如，您有

<section class="landing-search">
    <router-outlet name="search-bar">
<section>

我猜你会一直在那里显示你的搜索栏组件，而不是交换不同的搜索栏组件。

在那种情况下，如果您的搜索栏组件的选择器是，例如'landing-search-bar'，那么你会使用：

<section class="landing-search">
    <landing-search-bar></landing-search-bar>
<section>

@Component+router-outlet 是在 Angular 7 中拥有可重用模板的唯一方法吗？

Is @Component+router-outlet the only way to have reusable template in Angular 7?

angular

angular7