问题标签 [ng-component-outlet]

问问题

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

16 问题
Newest
Active
Bountied
318
Unanswered
0 投票
1 回答
166 浏览

javascript - Angular 2，动态组件的子组件不渲染

我正在使用这种方法

将一个组件注入另一个组件，在我的情况下，将表单注入到侧边栏中。但是，从注入的组件（表单）中，我不能使用应用程序的管道和共享组件。shared.module 中不存在任何组件或管道在注入的组件中被识别。如何在通过 ngComponentOutlet 注入的组件中使共享组件可用？

我做到了，但是：我使用组件工厂angular-comp-factory做到了。但实际上我还有一个问题：我的组件正在渲染但没有它的子组件。如何使用组件工厂渲染其子组件？

0 投票
1 回答
660 浏览

javascript - 如何在 Angular 高阶组件 (HOC) 中将 html 元素作为子元素传递？

我想在我的 Angular 高阶组件中传递一个 HTML 元素。现在我将子元素作为@Input 装饰器传递。我的 HOC，Main Container 是这样的。

在其他组件中，我像这样使用我的 HOC

我当前的代码：

在 .ts 文件中，我像这样传递我的子组件

现在我想做的是，像这样的 React 格式

0 投票
2 回答
237 浏览

angular - Angular named router outlet doesn't work as expected

I've an angular project with the following routing structure, starting from the app root:

The root outlet it's in the AppComponent, afterwards the ShellComponent contains another router outlet that is passed as content to a SidebarComponent that displays it in a mat-sidenav-content, something like this:

So when I navigate to /admin/editor everything works as expected: I can see the ShellComponent and the EditorComponent is shown in the right place. The problem starts inside the EditorComponent. This component contains a <profile></profile> where I want to display the <view-profile></view-profile> or <edit-profile></edit-profile> component using the outlet named profile (as you can see in the EditorRoutingModule configuration. Here the code:

The ProfileComponent loads but I don't see the <view-profile></view-profile> as I expect. Inspecting the HTML I can see the profile outlet where I expect it.

Any suggestion about it?

0 投票
1 回答
210 浏览

angular - “NgComponentOutlet”没有提供者

我有一个 Angular 11 应用程序，它导入@angular/material,@ngx-translate和一个名为icell-data-table的库。

从 github 页面下载示例项目，我能够在本地环境中没有任何问题的情况下启动它。

但是在将其提取到 Stadckblitz 演示时，我遇到了一个奇怪的错误：

Stackblitz项目可以在这里找到。关于它缺少什么的任何想法？

更新 1： 正如@yurzui 指出的那样，Angular 11 和 Angular 11 中存在不兼容的依赖项。我已将 lib 更新为对ng-dynamic-componenticell-data-table具有适当的依赖项，现在是 Angular11 版本（^8.0.0）。

但是 stackblitz 示例仍然显示错误:(

0 投票
0 回答
24 浏览

angular - 使用 ngComponentOutlet 的 ContentChildren

是否可以使用 ngComponentOutlet 渲染 ContentChildren？我正在尝试通过当前指令找到呈现的控件来做一些事情appAutoFocus，但内容子项一无所获。在我的动态渲染组件中，我提供了 FOCUSABLE 注入器以在指令中使用 ContentChildren 找到它

这是示例 https://stackblitz.com/edit/angular-fquz3w

0 投票
1 回答
86 浏览

angular - Angular 11+ MatDialog：内部组件的 (ngComponentOutlet) html 不会触发

事实上，我在 MatDialog 中嵌入了 ngComponentOutlet 组件时遇到了更多问题。但让我们从这里开始。

我正在建造的东西

我想在 MatDialog 中显示任意组件。我找到了一种方法，但是虽然它适用于 Angular 9（我找到了一个编写示例的版本），但它不适用于 Angular 11（我的项目所基于的版本）或 Angular 13（@latest ）。

观察

  • 当内部 HTML 包含 a<button (click)="close()">Close</button>并且我单击按钮时，close()不会触发内部组件的方法
  • close()如果我将它绑定到(mousedown)事件而不是(click);它会触发该方法 可能适用于其他事件，(click)但
  • 当我单击按钮时，会重新加载内部组件（请参阅示例中的控制台日志）
  • 当我单击对话框上的任意位置时，内部组件会重新加载（请参阅示例中的控制台日志）；在 Angular 9 中不会发生

Angular 9 没有这个问题。我在下面的两个示例中都使用了完全相同的应用程序代码（两个项目都是用 . 创建的ng new，使用不同的ng版本）。

复制示例

（stackblitz 病了，如果它打喷嚏 500 秒，请重试几次。可能是 covid ......）

破碎的例子（Angular 11）

工作示例（Angular 9）

  • 在 Angular 9 示例中，MatDialog 按预期工作
  • 在 Angular 11 示例中，MatDialog 无法按预期工作
  • 我已经尝试过 Angular 13 (@latest)，问题仍然存在

问题

  1. 为什么会这样？
  2. 我该如何解决这个问题？

原始文件 FFR

app.module.ts

app.component.ts

我的-dialog.service.ts


12345678910