问题标签 [router-outlet]

这是我试图实现的目标，我想要在更改页面时向左和向右滑动的过渡，但是我的代码不起作用，事件已经触发，然后当我滚动页面时它触发了很多事件（我用控制台日志）

这是我的代码的样子

app.component.html ：

这是我的 app.component.ts ：

为什么它不工作？我在这里错过了什么？我的代码结果的 console.log 是这样的：

当我上下滚动页面时事件增加，我必须为事件触发做错事，但转换仍然无法工作

我有命名路由器出口和延迟加载模块的问题。我有 2 个路由器插座，第一个没有名字，第二个名为mainapp。

app.component.html

app.main.component.html

应用程序.routes.ts

客户端.module.ts

1. LoginComponent 被加载到路由器出口
2. 登录后 AppMainComponent 被加载到路由器出口
3. 现在我尝试将 ClientComponent 加载到命名路由器插座mainapp

我收到错误

当我修改路线时，它可以工作：

我的主 (app.component.html) 视图中有两个 html 部分 - 一个用于导航到子页面的按钮导航栏，另一个部分用于显示记录表。When select a record of the table I expect the details page of the record should display in the router-outlet but the table should be disappeared. 但是详细信息页面显示在表格下方，而我希望当应用程序路由到子页面（详细信息页面）时记录表应该消失。任何帮助如何实现这一点将不胜感激。

这是我的代码：

谢谢是的。

我的根模块路径是这样的：

它按预期工作，我可以在登录后路由到 ManagementPortalModule。让我们看看我的延迟加载的 ManagementPortalModule。

有一个命名的路由器插座。

我在 ManagementPortalModule 中的路线。

它可以在开始时将 Test1Component 加载到“子”插座中。单击链接时，我想路由到 Test2Component

生成的网址

/管理门户/（子：test2）

单击时没有任何反应。然后我尝试了

网址

/管理门户（子：test2）

我认为根据this的url格式正确，然后点击时出现错误

无法匹配任何路由。URL 段：'test2'

请帮忙，非常感谢！

应用程序的路线是：

] }

所以，我可以导航到 profilePageComponent：

但是从 ProfilePageComponent 导航到 profileOutlet 不能使用以下代码：

或者

所以，我需要帮助来从一个命名的路由器插座导航到另一个命名的路由器插座

在我的应用程序中，我想在两个路由器插座中显示内容，主插座和命名插座。如果我将两个插座都放在根级别，我可以像这样设置命名插座的内容：

但是，我希望应用程序的总体布局能够提供单个路由器出口并能够在子路由中使用不同的路由器出口结构。

如果我创建一个子路由，它也有一个主要和一个命名出口，我无法设置辅助出口的内容。报告的错误是：

无法匹配任何路由。

路由定义如下：

app.component.html的模板包含一个主要出口和 - 出于测试目的 - 一个命名的次要出口：

上面的代码是从一个按钮调用的，并且设置了 rootSecondary 出口没有任何问题。

模板child.component.html定义了两个位于根主出口内部的出口：

child.primary.component.html包含一个按钮，该按钮调用代码来设置辅助插座：

单击后，将运行以下代码：

如何更改代码以填充路由器插座 childSecondary？

问题是我正在工作的嵌套路由器插座与子页面上有多个路由器插座的组合。为简单起见，我有一个带有“登录”链接的主页

然后登录到：Active.Module。这就像一个主页，可以有许多区域（路由器插座），每个区域都做不同的事情（组件）。活动.html：

在浏览器中，它看起来像这样：

主页->登录“启动页面”活动根目录->应该是主页项目管理显示在未命名的路由器出口中执行显示在未命名的路由器出口中第二个是问题......它不显示在命名的出口中.

app-routing.module 的路由定义为：

当我单击 SECONDARY 链接时，路由最终采用 InvalidPageComponent 路径。

当我把它变成一个真正的应用程序时，唯一的要求是：

a) 一些父页面，其内容出现在“全局”应用程序路由器出口中（当然根据需要）。

b) 这些页面的一个示例（如 Active）具有“正常”内容，如左侧绿色框。

c) 页面的某些区域（未命名和命名的路由器出口）包含来自特定于该页面的其他子组件的内容。

我想我已经尝试了这个星球上的每个站点和 plunker，但是......没有运气。我感谢您的帮助。提前致谢。

瑜伽士

我创建了一个简单的窗口组件，它有一个标题并显示了一些内容。我的应用程序一次只会显示一个窗口，所以我将它放在我的应用程序的根目录中，并且只在需要时更改其内容。

由于我需要能够从应用程序的各个位置设置窗口内容，因此我创建了我的组件绑定到的服务。这样我就可以从我需要的任何地方调用服务上的方法，并更改窗口组件的属性。

然而，我不知道如何处理该服务，是指定要显示为窗口内容的组件实例。我可以以某种方式例如以编程方式设置ng-content窗口组件吗？

我当前的解决方法是在窗口组件中指定所有可能的内容，并选择正确的内容，*ngIf如下所示：

它工作得很好，但是列表越来越长并且难以维护。我也不喜欢将我的窗口组件与所有其他与它无关的组件结合在一起。此外，每个不同的内容都有自己的输入参数，现在窗口服务和组件也需要跟踪这些参数......

所以我的问题是；是否有一个我不知道的角度特性可以解决这些问题，或者我应该以另一种方式处理它？

想到的事情是ng-content在窗口组件中放置一个标签，并以某种方式让服务用我需要的东西替换那个标签。或者我应该router-outlet在我的窗口组件内放置一个？我也不喜欢这种方法，因为更改内容不应该算作导航。我已经有了一个与这个组件无关的出口。

首先，我想说我知道如何通过选择器删除组件的标签。比如像这样使用属性选择器：

selector: "div[my-component]"

我现在正在使用 Angular 5，我的问题是有由 渲染的组件router-outlet，并且这些组件被自动放入一个ng-component元素中。我无法在任何地方使用属性选择器。如何删除这个元素？该元素导致我的 CSS 中断。

我正在尝试将 2 个元素彼此相邻放置，其中一个元素占据屏幕的 25%，另一个是一个角路由器插座，它占据了容器的其余部分。使用以下内容最终会在屏幕两侧使用两个元素，中间有空格。** 部分是有问题的部分

出来看起来像

左侧的 admin-route-menu 标记只是基本的 html 和 css，其中 html 中有一个 mat-list。路由器插座可以根据角度规格采用任何元素。如果这也有帮助，我可以包括 admin-route-menu。

我也尝试过使用常规的弹性盒子，但结果是一样的。

任何帮助表示赞赏，谢谢