问题标签 [angular2-components]

我有问题，帮助解决我有一个带有模板的组件

和指令滑块

但是该指令是在组件中的数据触发之前触发的，怎么做才能推迟组件的启动指令渲染

我有一个问题......我的应用程序中有一个 Angular2 组件，它有一个像这样的模板（我已经简化了这个）......

在我的组件中，我有以下 TypeScript 代码：

现在，比如说我只想监听子 div / 元素的动画事件或触发子动画的 observable 应该运行它似乎两个侦听器都被触发，因为子是父的一部分......我也有请注意，父侦听器的输出在子侦听器之前执行。我想我可以将一个事件传递给回调函数以确定应用了动画的内容，但它似乎使renderer.listen函数的第一部分相当无用。也许我做错了？关于我应该如何监听组件模板特定部分的事件的任何建议。

如果这一切听起来令人困惑，请告诉我，我会改写这个......提前谢谢

我正在使用 Angular2 Cli 构建 Angular2 应用程序。我有一个notifications.component，它有一个像这样的构造函数

当我构建（npm start）时，出现此错误

angular cli生成的文件notifications.component.spec.ts是这样的

但是，如果我在没有构造函数参数的情况下构建一切正常。如果我在构建后添加此参数，则一切正常。

我错过了什么？

似乎无法弄清楚为什么我的轮播组件位于但没有显示任何 CSS 或图像。

我的 app.component.ts

轮播组件.ts

用于声明图像的图像类

我的 app.component.html （这是应该显示轮播的地方）

所有其他文件均根据 Angular 2 快速入门设置的默认设置。我还设法让轮播作为一个独立的组件独立运行，我在尝试将它与导航集成时遇到了问题。

我正在使用 Angular 2 项目中的剑道。

正确设置小部件没有问题：

当它运行时，插件会修改 DOM（据我所知，不会修改由 angular2 维护的影子 DOM）。我的问题是，如果我想在插件内部的任何地方使用组件，比如在模板中，Angular 不知道它的存在并且不会绑定它。

例子：

每月计划日课程：

是否有一种“正确”的方式将这些组件绑定到小部件创建的标记内？我已经设法通过侦听来自小部件的绑定事件然后遍历它创建的元素并使用 DynamicComponentLoader 来做到这一点，但感觉不对。

我正在动态加载一个组件，它工作正常，除了我可以让它被销毁。

我正在动态加载的组件

在这个组件的 html 中，我只有一个按钮来删除它，类似的东西

但是，当 removeComponent() 触发时，会引发错误

我错过了什么？

更新
关于这个问题的更多解释：[1] 我有 user.component 和 user-list.component。[2] user.component 中有一个按钮调用user-list.component [3] 当这个按钮被点击时，user-list.component 应该加载到一个特定的区域，这是工作的。[4] user-list.component中有一个按钮可以关闭这个动态加载的组件。[5] 当这个按钮被点击时，user-list.component 应该被销毁。

用户组件

但是，我听说以这种方式动态加载组件已被弃用。我们应该使用 ComponentResolver 和 ViewContainerRef。那正确吗？

我有一个组件，它的模板包含“页眉”、“内容”和“页脚”div。在内容 div 中，我设置了一个新的自定义指令，用于检查 div 元素是否溢出。直到这一步一切正常。接下来，我想将数据从我的指令中溢出到它的主机组件，以便组件知道是否显示“显示更多”按钮和其他配置。

我的问题是如何从我的内部 div 的 ('content') 指令与其主机组件进行通信？

更新 - 添加代码示例

tile.component.ts

checkOverflow.ditective.ts

在我的智慧尽头，所以接触更聪明的人。我正在构建一个自定义的“选项卡式”CMS 系统。问题在于选项卡和组件。我希望在新生成的选项卡中显示特定组件，换句话说，我希望动态加载组件。澄清：

在图 1 中，我们看到了我们的布局，我们有带有链接的左侧边栏、显示已打开选项卡的选项卡架和显示已加载选项卡内容的内容架。

在图 2 中，当我单击侧边栏中的“帮助”链接时，我们看到了我们的布局。在选项卡持有区域创建一个带有标题的选项卡，并将其内容加载到内容区域。

我需要的：

1. 默认情况下，“仪表板”选项卡处于活动状态且不可关闭。
2. 当我单击侧边栏中的“帮助”链接时，我希望初始化 HelpComponent 加载。我想在选项卡持有者区域和内容区域中创建标题为“帮助”的选项卡，将组件模板和数据加载到仪表板模板的旁边，而不是覆盖它。
3. 我想自由地跳过标签，基本上显示/隐藏发生在那里的内容上。仅当我在选项卡中按 x 时，选项卡及其内容才会从 DOM 中删除。
4. Url 代表你在哪里，如果我在仪表板中：localhost/dashboard，如果我在帮助中：localhost/help。

使这成为现实的最佳选择是什么？

我可以使用路由器链接以某种方式设置此系统，还是应该在 SidebarComponent 中创建一个函数，该函数读取我单击的元素，获取其属性“data-href”，然后以某种方式手动初始化组件加载/路由更改？

一些非常基本的 plunker 在行动中展示了这一点将是神圣的！

ps 我研究的主要是 DynamicComponentLoader(DCL)，但现在已弃用，取而代之的是 ElementRef 和 ViewContainerRef ( http://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2/ ) ，但我找不到足够合适的示例来理解如何将其应用于我的情况。

然而，这有点接近我所需要的——http code there->: //plnkr.co/edit/MMy3azc4ksQOH6ezZIG5 ?p=preview 。它按需加载组件，然后简单地重用它们（显示/隐藏）。但它似乎是建立在旧的路由器弃用模块上的。

我正在开发一个 Angular 2 (rc-4) 指令，它将检查是否可以在当前用户权限下查看组件并相应地显示/隐藏组件。

我在组件初始化时创建了组件标识符。例如，在profile.component.ts中，我正在为 ProfileComponent ( elementId:string;)生成 id

我按照Angular 2 指南创建了一个结构指令。

因此，为了阻止或允许一个组件，我需要将该组件的 id 传递给指令。目前，我已将组件 ID（“app.dashboard.profile”）硬编码到指令输入中，如下所示，

此设置有效。但我想从关联组件的变量中获取组件 id，而不是在 html 标记中对其进行硬编码。有没有办法可以从我的指令 (RestrictDirective) 访问我的组件 (ProfileComponent) 中的变量？

我想不出正确的方法来做到这一点，但这是我想要实现的目标：

• 抽象类引擎

• TurboEngine 类扩展引擎

• 类 RocketEngine 扩展引擎

我有一个角度应用程序，它在很多地方注入“引擎”并使用它的方法来满足业务需求。

我唯一的问题是我必须在每个地方同时注入 TurboEngine 和 RocketEngine 并且有条件地决定调用哪个。

这就是我想要改变的。由于我有一个抽象引擎，我想在我的主要组件中注入一次，然后通过这种方式在我的组件中自动注入。

所以基本上在运行时定义服务的提供者。

这是我尝试过的，但没有奏效：

我在它工作的主要组件中完成了它，但是在所有其他地方我都遇到了以下错误：

TurboEngine 没有供应商！（引擎 -> 涡轮引擎）

更新：

我想使用它的方式：

• 我有A注入 Engine 的组件（这就是我要选择实现的地方，因此根据某些条件选择 TurboEngine 或 RocketEngine。

• 然后我有 component B，它位于 componentA的模板中。在这里，当我尝试注入时，Engine我希望拥有与我在组件中手动创建的相同的实例化对象A