问题标签 [angular4]

从 Angular 4.0.0 开始，应该使用 Renderer2 来访问 DOM 节点。我找不到访问 DOM 节点的类 List 的方法。我可以轻松添加或删除课程，但无法获得课程列表。我错过了什么吗？

Renderer2文档

你好 SO 社区和 Angularians！

所以，我在 Angular 2 中开发了一个巨大的平台。我意识到 Angular 2 的许多外部库和依赖项正在迁移到新的 Angular 4。很明显，这给了我很多错误。

我可以分叉这些库并使用分叉版本并订阅主库开发，或者我可以将我的项目升级到 Angular 4。

为了确定我是否值得迁移而需要回答的问题：

• 与 Angular 2.4 的兼容性

我发现了一些调整以确保与旧版的兼容性，例如：https ://github.com/angular/angular/commit/e99d721

• 更改应用程序范围

我是否必须浏览整个应用程序并开始修复问题？

我的意思是，主要功能是否以我必须审查其中许多的方式进行了重新设计？

或者，是否有许多构建/核心不兼容会让我忙于修复编译错误/警告而不是开发？

我不是要求有人为我做研究，我是在问那些可能已经经历过这个过程或者只是熟悉这两个版本的人，以便给我一些经验提示、澄清等。

目前，我正在这里做我的研究：

• https://github.com/angular/angular/blob/master/CHANGELOG.md
• http://angularjs.blogspot.it/2017/03/angular-400-now-available.html
• https://learninglaravel.net/angular-4-new-features-and-improvements

更新

我刚刚迁移到 Angular 4。@PierreDuc 在他的答案中提供的链接是一个非常好的工具，可以在迁移过程中获得体面的指导。

我会推荐：

1. 阅读新功能并使用 Angular 4 更新自己。这特别有用：https ://angularjs.blogspot.it/2017/03/angular-400-now-available.html
2. 遵循 Angular 的指南并修改您的项目：https ://angular-update-guide.firebaseapp.com/

我还建议提交您当前的项目，在您的开发存储库中创建一个新分支，然后在该分支中继续迁移。

我遇到的一个问题：
Input，Output并且ContentChild将从错误的路径导入。

我的情况：

解决方案：

我有几个关于 Angular 的问题。我最近开始尝试使用 Angular 并且真的无法掌握何时应该取消订阅，显然建议使用 AsyncPipe 但在某些情况下无法使用它。

• 如果我在服务中订阅 HTTP 请求，Observable 是自行取消订阅还是在整个应用程序生命周期内保持不变？

• 当我订阅（没有 AsyncPipe）组件中的 HTTP 请求时，我可以在 ngOnDestroy 生命周期挂钩中手动取消订阅，这很好，但在我的情况下，我有一个提交方法来创建帐户

account.component.html

account.component.ts

据我所知，订阅现在是持久的，直到我的 AccountComponent 被销毁，但是有没有办法在这里使用 AsyncPipe 或者我在服务本身中订阅更好？

我读过一些关于有限和无限 Observables 的内容，但并没有真正理解 Observable 何时是有限的。

• 我面临的另一个问题是，在success => this.collection$ = this.service.getAll()我使用时，我的 UI 不会使用新帐户列表进行更新，ChangeDetectionStrategy.OnPush但可以正常使用ChangeDetectionStrategy.Default

这是获取帐户数据的服务方法

我有一个角度项目，我想在其中创建某种导航菜单。这个想法是应用程序的所有链接都放在顶级 NavigationComponent 中，其他路由是它的子节点并加载到它的路由器出口中。应用程序路线看起来像这样：

现在我想添加自定义RouterReuseStrategy，但是当我导航到尚未加载的子模块的某些路由时，我无法在shouldReuseRoute()方法中获取未来的路由 url。

例如，如果我仅导航到未来路线的'/module1/someRouteOfModule1'in ，并且在数组中也不会有路线的其他部分，并且我无法正确保存该页面。routeConfig.pathActivatedRouteSnapshot'module1'pathFromRoot

但是，在那之后，应用程序导航到该模块的其他路由，可以从 pathFromRoute 数组接收整个路由，并且一切正常。

有人遇到过这个问题吗？可能有办法预加载延迟加载模块路由吗？

我一直在阅读有关如何使 tree shaking 工作以及如何解决 webpack 和 typescript 和 uglify 存在的问题的信息，但我似乎无法使其工作。

在一个全新的 Angular4 项目中让 tree shaking 工作的最简单的步骤是什么？（使用 生成的项目ng create foobar-project）。

"Property 'push' does not exist on thype 'IHero[] | Promise'. Property does not exist on type 'Promise'

Why the heck not? isn't it an array?

Going through the Tour of Heroes with Angular 4 in an angular-cli project. I'm using the async pipe for the repeater instead of the official tutorial's method. https://angular.io/docs/ts/latest/tutorial/toh-pt6.html

heroes.component.ts

hero.service.ts

If I console.log out the this.heroes on init, I can see it is a ZoneAwarePromise....

How can I get the .push to work on this?

If I use a traditional .then method, then the | async pipe errors. out.

Wall of Errors ensues...

我是第一次使用 ng cli。我正在尝试在 foo 模块下创建一个新模块（'foo'）和一个新组件（'bar'）。不过，我认为我应该如何在 ng cli 中执行此操作似乎不起作用：

ng cli 版本：

我做错了吗？我还没有找到专门关于此功能的文档。

谢谢！

在我的Angular2/4 应用程序中，我使用ng-bootstrap及其组件NgbTooltip。

假设以下HTML代码段

有给定的习惯CSS

我对我的实现还不满意，也许有人可以帮我找到一个优雅的解决方案来解决我的问题：

假设文本不适合div，那么它将被截断并按预期附加“...”，并且工具提示显示在div. 这对这种情况很好，但是当内容很短时，它看起来很丑：

现在工具提示仍然显示在 div 的顶部中心，但在文本的右侧（因为它很短但div仍然是全宽）。

我认为我可以通过使用span元素并在其上设置工具提示而不是div：

但是这种解决方法引发了另一个问题，如下所示：

现在的问题是跨度被截断，但实际上比div. 工具提示呈现在.span而不是div.

任何“顺利”的想法如何使它更好？非常感谢您的意见。

问题：如何让 PrimeNg 图表异步刷新？

场景：我有一个下拉列表，我想根据用户选择刷新图表。

我以为在了解了 Angular 更改检测以及如何重新分配对象以使其查看数据已更改（而不是在适当位置更新对象内的数据）之后，我知道了这个问题的答案，但是在阅读了许多其他图表甚至尝试过之后，我了解到这个问题比我最初想象的要困难一些。

当我读到 ng2-charts，它也从charts.js 构建指令时，他们使用有点笨拙的解决方案来解决 Angular 中的这个问题。以下是他们示例代码的摘录：

http://valor-software.com/ng2-charts/

尽管他们对数据进行字符串化和重新解析以制作克隆副本并重新分配数据，并且似乎对他们有用，但我在 PrimeNg 上尝试了这种方法，但没有成功。

在其他示例中，他们对图表数据执行 .slice()，或直接访问 CHART_DIRECTIVES 并 .update() 图表。他们还等待绘制图表，直到异步加载数据，这只是第一次加载并且不会解决我想要的行为。 为什么我应该练习测试驱动开发，我应该如何开始？

我知道我的数据在幕后，我只需要知道如何刷新图表（即想出一种方法让 Angular 正确识别我已更改数据）。

我一直在尝试创建一个基于 cli 的示例 angular4 应用程序，其中包含一个主模块和 3 个产品模块（产品本身是一个路由参数，可以懒惰地加载每个产品屏幕）。

这是我的示例 - https://github.com/shankarvn/angular4lazyloading

重现步骤

• git 克隆https://github.com/shankarvn/angular4lazyloading.git

• 光盘应用程序

• npm 安装

• ng服务-p 4003

在浏览器中 localhost:4003 => 应该加载 3 张卡片，显示 product1、product2 和 product3。此时，单击product1，您将看到路线更改和product1 的ui 加载。现在单击仪表板，您将在控制台中看到一个错误

不确定我做错了什么 - 只是在 product1 模块延迟加载时加载了仪表板路由。加载 product1 模块时不应该注册路由。任何帮助表示赞赏。

谢谢。