问题标签 [router-outlet]

ng-content我正在尝试加载不同的“父”组件，并通过定位每个父组件将路由内容注入这些不同的父组件。本质上，每个父组件都根据设备宽度（小型/移动设备、中型/平板电脑和大型/台式机）处理导航和其他样板文件。

在我的应用程序中为每个路由生成的内容需要被嵌入（注入）到父组件中。每条路由的内容都针对特定的注入点，使用ng-content.

我可以使用<ng-container *ngComponentOutlet="ResponsiveComponent;"></ng-container>. 问题是我的路由生成的内容没有被注入到ng-content每个父组件的目标位置。

这是交换父组件的代码。 AppPageComponent扩展ResponsiveComponent它根据媒体查询监视设备宽度。

Angular 的NgComponentOutlet文档显示您可以将可选的可投影节点列表作为目标，以插入到内容 (ng-content) 占位符中。我遵循了 Angular 文档中的示例，并且能够将文本节点注入到ng-content我的父组件中的不同占位符中，它适用于我的小型/中型/大型父组件。

如何从我的路线中获取内容以注入这些不同的占位符？看来我真的很接近让它发挥作用。我可以将本质上的静态内容注入占位符，但我不知道如何将路由生成的内容注入占位符。

更新 - 2017 年 7 月 25 日

我创建了这个plunker 来演示这个场景（https://plnkr.co/edit/hOwRX1Ml6gX0S8em6nd5?p=preview）。

在 plunker 中，page-wrapper组件使用 ngComponentOutlet 根据设备宽度加载小型/中型/大型组件。page-wrapper 组件将静态内容注入到每个小型/中型/大型组件的占位符中，而不是从第 1 页注入路由内容。

我的目标是拥有一个页面包装器组件来处理响应式需求，例如针对小型/中型/大型响应式设计的不同导航元素。

那么，如何将“静态”内容注入到动态加载的组件的ng-content占位符中，而路由生成的内容却没有注入到ng-content占位符中？

谢谢你的帮助。

我正在尝试使用这种技术拦截输入属性更改和设置器，以将一些数据从父组件传递到子组件，并在值更改时调用子组件中的方法。我的问题是子组件绑定到父组件<router-link>，当我尝试使用以下方法传递数据时：

父组件.html：

其中 some_value 是我试图从父级传递给子级的参数。

父组件.ts：

和

父组件.ts：

但是我得到了错误

未处理的承诺拒绝：模板解析错误：无法绑定到“some_value”，因为它不是“router-outlet”的已知属性。

我究竟做错了什么？使用时将数据从父组件传递到子组件的正确方法是<router-outlet>什么？

在此先感谢您的帮助。

我有一个包含多条路线的应用程序，其中一条有孩子。我的问题是我必须以某种方式“覆盖”<router-outlet>它显示的组件之一中的显示内容。

我的路由树看起来有点像这样：

我的 app.component.html 设置如下：

现在在 ProductsComponent 中，我有一个需要链接到 EditComponent 的按钮，这是一个用于编辑产品或添加新产品的页面。所以我在里面做了一个这样的按钮：

它链接到的路径是products/product-container，对我来说这似乎是正确的。尽管单击它，但导航本身可以工作（浏览器中的 url 更改），但显示的内容永远不会改变。显然，<router-outlet>在我的产品页面中添加另一个将在其中显示 EditComponent。

现在的问题是：当我按下 ProductComponent 中的“添加”按钮时，有没有办法“覆盖” <router-outlet>app.component.html 以显示 EditComponent 而不是 ProductComponent？

或者我是否必须让 Add 按钮在两个页面部分之间切换，它们有自己的 ngIf 或类似的东西？

编辑：我想到的另一个选择是将 ProductComponent 和 EditComponent 放在它们自己的 RoutingModule 中并在同一级别上，然后为两者创建一个“父”组件并让它们<router-outlet>在该父组件中共享一个。虽然我更喜欢在实现类似的东西之前先看看是否有其他选项。

我知道正常情况是让您的app-root（根组件）在其中添加工具栏、侧边栏等并<router-outlet>更改内容。

我的问题是通过 index.html 注入的根组件（app-root），如下所示

不能包含侧边栏、菜单等，因为我希望提供一个不能包含这些半共享组件的登录屏幕（和其他屏幕）。所以现在我的 app-root 包含一个简单的<router-outlet>，非常适合我的登录和其他不得共享共享内容的页面，即侧边栏、菜单等。

我希望使用辅助/子路线之类的东西，但我并不完全理解它们。一个好的场景是登录屏幕继续按原样工作，它被注入到路由器插座中，但所有其他路由都需要将自己注入路由器插座以及一些共享内容。

我应该在这里做什么？

我当然不想通过复制/粘贴的方式在每个组件中放置侧边栏、菜单。它应该是共享的内容。

应用程序运行正常，但上传子路由也可以在没有“/upload”的情况下访问。例如“/照片”、“/广告”。这不应该发生。我不知道为什么会这样。如果有人知道解决方案，请回复。

app.routing.ts

露营地.routing.ts

上传.路由.ts

延迟组件上传也在 App 组件路由中加载

我有我的角度应用程序路由，我需要在 router-outlet 元素中动态渲染组件。我需要样式 router-outlet 作为渲染组件的容器，但是当我设置他的宽度时，所有内容都会被推送，我发现它不在 router-outlet 中，如图所示。

App-messenger 标签应该在 router-outlet 中。

这是我的家庭组件，其中包含路由器插座：

和路由器配置：

编辑

我也尝试过包装路由器插座，但我的内容也被推送了，我不知道你可以在第二张图片上看到。除了您可以看到的引导类之外，我没有任何其他样式。

我有一个 Angular 4 应用程序，我无法设置routerLink导航工作。该请求总是被重定向到我的 404 错误页面。

这是我的代码：

我的路由配置的相关部分在我的NgModule：

TransactionsIndexComponent模板的相关部分：

TransactionAddComponent模板的相关部分：

routerLink我为in尝试了这些值TransactionsIndexComponent：

1. ['', { outlets: { next: 'Add' } } ]
2. [{ outlets: { next: 'Add' } }]

他们都没有工作。问题是什么？

PS：它本身带有嵌套router-outlet的模板正在工作，因为我可以/Transactions/(next:Add/(next:AddPerson))毫无问题地打开一个地址。

我通过命名路由器出口将参数发送到我的ChildComponent. 但是在子组件中，当我尝试访问参数时，它们是未定义的。

这是路由配置文件

这是我的链接：

这是浏览器中的样子：

这是我保留的路由器插座AppComponent：

我在我的操作组件中访问这个参数是这样的：

我已经解决了stackoverflow中的其他问题并实施了解决方案，但仍然无法正常工作。这段代码可能有什么问题？

我想在整个应用程序中显示通用页眉和页脚。但是当我尝试这样做时，它会显示两次：-

app.component.html

app.component.ts

app.module.ts

结果

上次我通过为页眉和页脚创建组件来解决这个问题。我知道如果我这样做会起作用，但我想了解为什么这是错误的......

Angular 2 中是否有任何方法可以为路由器添加的每个孩子设置通用样式？

In my particular case I use flex boxes and so I need each parent to have display:flex style. But as you know, each Angular component wrap its content and produce its own container dynamically. I know I can use :host styles to cover this need. I know I can also use ng-deep on the router-outlet parent styles to push them down to the children. Is there any other way to address this?