Questions tagged «angular»

我想使用欧洲格式显示日期，dd/MM/yyyy但使用DatePipe shortDate格式仅使用美国日期样式显示MM/dd/yyyy。 我假设多数民众赞成在默认语言环境是en_US。也许我在文档中找不到，但是如何更改Angular2应用程序中的默认语言环境设置？也许有某种方法可以将自定义格式传递给DatePipe？

138 javascript  angular  date-pipe 

有没有一种方法可以ng test针对单个文件而不是整个测试套件运行？理想情况下，我想在编辑文件时获得最快的反馈循环，但是karma在每次保存时都执行整个套件，这在构建足够大的测试套件时会有点慢。 这与如何仅使用angular-cli执行一个测试规范不同，因为该问题与运行单个规范有关。这是关于运行单个文件。该解决方案具有相同的Jasmine规范功能，但问题的性质略有不同。

138 angular  jasmine  angular-cli  karma-runner 

我刚刚从Angular 2 rc4升级到rc6，但遇到了麻烦。 我在控制台上看到以下错误： Unhandled Promise rejection: Template parse errors: 'cl-header' is not a known element: 1. If 'cl-header' is an Angular component, then verify that it is part of this module. 2. If 'cl-header' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress …

137 angular  karma-jasmine 

我发现了一些AuthGuard使用的实现take(1)。在我的项目中，我使用first()。 两者的工作方式相同吗？ import 'rxjs/add/operator/map'; import 'rxjs/add/operator/first'; import { Observable } from 'rxjs/Observable'; import { Injectable } from '@angular/core'; import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import { AngularFire } from 'angularfire2'; @Injectable() export class AuthGuard implements CanActivate { constructor(private angularFire: AngularFire, private router: Router) { } canActivate(route: ActivatedRouteSnapshot, …

137 angular  rxjs  angular2-observables 

我正在使用chrome 70并且chrome确实添加了方法.flatMap, .flatten, .flat。所以我的代码确实按预期运行。不幸的是，Typescript不喜欢它。 // data.flatMap lint error export const transformData = (data: any[]) => data.flatMap(abc => [ parentObj(abc), ...generateTasks(abc) ]); 我得到的警告是 TS2339: Property 'flatMap' does not exist on type 'any[]'. 顺便说一句，我正在使用Angular 6，Typescript ~2.9.2并且已经包含import 'core-js/es7/array';在中polyfills.ts。 我的猜测是这些方法没有类型，我曾尝试npm run -dev @types/array.prototype.flatmap但仍未解决。

137 angular  typescript 

在Angular CLI中生成服务时，它将为Injectable装饰器添加带有“提供的”属性且默认值为“ root”的额外元数据。 @Injectable({ providedIn: 'root', }) ProvideIn到底做什么？我假设这使服务像整个应用程序的“全局”类型单例服务一样可用，但是，在AppModule的提供程序数组中声明这样的服务会更干净吗？ 更新： 对于其他任何人，以下段落也对此提供了另一个很好的解释，特别是如果您只想为功能模块提供服务。 现在有一种推荐的新方法，可以@Injectable()使用new providedIn 属性在装饰器内部直接注册提供程序。它接受'root'作为值或您的应用程序的任何模块。使用时'root'，您injectable将在应用程序中注册为单例，而无需将其添加到根模块的提供者中。同样，如果使用 providedIn: UsersModule，injectable注册为的提供者，UsersModule而不会将其添加到providers模块的。” -https://blog.ninja-squad.com/2018/05/04/what-is-new-angular -6 / 更新2： 经过进一步调查，我认为只有 providedIn: 'root' 如果要provide在根模块以外的任何模块中使用服务，则最好使用providers功能模块装饰器中的数组，否则将遇到循环依赖关系。这里有趣的讨论-https: //github.com/angular/angular-cli/issues/10170

136 angular  angular6 

我正在使用angular 2，发现了类似的东西 <input #searchBox (keyup)="search(searchBox.value)" 而且有效。 但是，我不了解#searchBox的含义。我还没有在文档中找到任何明确的内容。 谁能告诉我它是如何工作的？

135 javascript  html  angular  typescript 

如何在Angular中复制对象并丢失其引用？ 使用AngularJS，我可以使用angular.copy(object)，但是在Angular中使用它会出现一些错误。 例外：ReferenceError：angular未定义

135 angular 

我有一个简单的应用，由初始化angular-cli。 它显示一些与3条路线有关的页面。我有3个组成部分。在这个页面上我使用一个lodash与角2 HTTP模块来获取一些数据（使用RxJS ObservableS，map和subscribe）。我使用简单的显示这些元素*ngFor。 但是，尽管事实上我的应用程序非常简单，但我还是得到了一个庞大的捆绑包和地图。我不是在谈论gzip版本，而是gzip压缩之前的大小。这个问题只是一般性建议查询。 一些测试结果： ng构建 哈希：8efac7d6208adb8641c1时间：10129毫秒块{0} main.bundle.js，main.bundle.map（主要）18.7 kB {3} [初始] [呈现] 块{1} styles.bundle.css，styles.bundle.map，styles.bundle.map（样式）155 kB {4} [initial] [rendered] 块{2} scripts.bundle.js，scripts.bundle.map（脚本）128 kB {4} [初始] [呈现] 块{3} vendor.bundle.js，vendor.bundle.map（供应商）3.96 MB [初始] [呈现] 块{4} inline.bundle.js，inline.bundle.map（内联）0字节[输入] [呈现] 等待：10Mb的供应商捆绑包是否提供了如此简单的应用程序？ ng build --prod 哈希：09a5f095e33b2980e7cc时间：23455ms块{0} main.6273b0f04a07a1c2ad6c.bundle.js，main.6273b0f04a07a1c2ad6c.bundle.map（主要）18.3 kB {3} [初始] [呈现] 块{1} styles.bfdaa4d8a4eb2d0cb019.bundle.css，styles.bfdaa4d8a4eb2d0cb019.bundle.map，styles.bfdaa4d8a4eb2d0cb019.bundle.map（样式）154 kB {4} [initial] 块{2} scripts.c5b720a078e5464ec211.bundle.js，scripts.c5b720a078e5464ec211.bundle.map（脚本）128 …

135 angular  webpack  angular-cli 

我正在使用Typescript在Angular 2中开发一个网站，我想知道是否存在一种实现thread.sleep(ms)功能的方法。 我的用例是在几秒钟后提交表单后重定向用户，这在html或javascript中非常容易，但是我不确定如何在Typescript中做到。 非常感谢，

135 angular  typescript 

我想手动编译一些包含指令的HTML。$compileAngular 2中的等效项是什么？ 例如，在Angular 1中，我可以动态地编译HTML片段并将其附加到DOM： var e = angular.element('<div directive></div>'); element.append(e); $compile(e)($scope);

134 angular  typescript  angular2-compiler  version-compatibility 

我读过 文档，其中说如果要使用scss，必须运行以下命令： ng set defaults.styleExt scss 但是当我这样做并制作该文件时，我仍然在控制台中收到此错误： styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open '/Users/Egen/Code/angular/src/styles.css'(…)

134 css  angular  sass  angular6  angular-cli 

我正在尝试在其他模块中使用在AppModule内部创建的组件。我收到以下错误： “未捕获（承诺）：错误：模板解析错误： “联系人框”不是已知元素： 如果“ contacts-box”是Angular组件，则请验证它是否属于此模块。 如果“ contacts-box”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。 我的项目结构非常简单： 我将页面保存在pages目录中，其中每个页面都保存在不同的模块（例如，customers-module）中，并且每个模块具有多个组件（例如，customers-list-component，customers-add-component等）。我想在这些组件中使用我的ContactBoxComponent（例如，在customers-add-component中）。 如您所见，我在widgets目录中创建了contacts-box组件，因此它基本上位于AppModule中。我将ContactBoxComponent导入添加到app.module.ts中，并将其放在AppModule的声明列表中。它没有用，所以我用谷歌搜索了问题，并添加了ContactBoxComponent来导出列表。没帮助 我还尝试将ContactBoxComponent放入CustomersAddComponent，然后放入另一个（来自不同模块），但出现错误，提示存在多个声明。 我想念什么？

134 angular  typescript  angular-components  angular-module 

2018年5月24日更新：根据我的原始帖子，我们现在是Angular的+3版本，并且仍然没有最终可行的解决方案。Lars Meijdam（@LarsMeijdam）提出了一种有趣的方法，当然值得一看。（由于专有问题，他不得不临时删除他最初发布其示例的GitHub存储库。但是，如果您想要复制它，可以直接向他发送消息。更多信息，请参见下面的评论。） Angular 6最近的架构更改确实使我们更接近解决方案。此外，Angular Elements（https://angular.io/guide/elements）提供了一些组件功能-尽管与我在本文中最初描述的功能不尽相同。 如果来自惊人的Angular团队的任何人碰巧遇到此问题，请注意，似乎还有很多其他人对此功能也非常感兴趣。积压的订单可能值得考虑。 我想实现在一个可插拔（插件）的框架Angular 2，Angular 4，Angular 5，或Angular 6应用程序。 （开发这个可插入框架的特定用例是，我需要开发一个小型的内容管理系统。由于此处未详细说明的许多原因，Angular 2/4/5/6它非常适合该系统的大多数需求。） 我所说的可插拔框架（或插件体系结构）是指一种系统，该系统允许第三方开发人员通过使用可插拔组件来创建或扩展主应用程序的功能，而无需直接访问或了解主应用程序的源代码。或内部运作。 （关于“ 没有直接访问或不知道应用程序的源代码或内部工作原理的措辞”是一个核心目标。） 可插入框架的示例包括常见的内容管理系统，例如WordPress或Drupal。 理想的情况（与Drupal一样）将是能够简单地将这些可插入组件（或插件）放入文件夹中，让应用程序自动检测或发现它们，并使它们神奇地“工作”。以某种可热插拔的方式发生这种情况，这意味着在应用程序运行时将是最佳选择。 我目前正在尝试（在您的帮助下）确定以下五个问题的答案。 实用性：Angular 2/4/5/6应用程序的插件框架甚至实用吗？（直到现在，我还没有找到使用来创建真正可插拔框架的任何实用方法Angular2/4/5/6。） 预期的挑战：在为Angular 2/4/5/6应用程序实现插件框架时可能遇到什么挑战？ 实施策略：可以为实施Angular 2/4/5/6应用程序的插件框架采用哪些特定技术或策略？ 最佳实践：为Angular 2/4/5/6应用程序实现插件系统的最佳实践是什么？ 替代技术： 如果一个插件框架是不实际在Angular 2/4/5/6应用，哪些相对相当于技术（例如React）可能是适合现代高反应性的Web应用程序？ 通常，Angular 2/4/5/6非常需要使用，因为： 它自然是非常快-如此之快。 它消耗的带宽很小（在初始加载之后） 它的足迹相对较小（在AOT和之后tree shaking），并且足迹不断缩小 它功能强大，并且Angular团队和社区正在持续快速发展其生态系统 它与许多最佳和最新的Web技术（例如TypeScript和Observables Angular 5现在支持服务人员（https://medium.com/@webmaxru/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-1-theory-37d7d7647cc7） 得到的支持Google，将来可能会得到支持和增强。 我非常想将其Angular 2/4/5/6用于当前项目。如果我能够使用Angular 2/4/5/6，我也将使用Angular-CLI并且可能Angular Universal（用于服务器端渲染）。 到目前为止，这是我对上述问题的看法。请查看并提供您的反馈和启示。 Angular 2/4/5/6应用会使用程序包-但这不一定与允许应用程序内的插件相同。Drupal可以通过将plugin文件夹放到公共模块目录中来实质上添加其他系统（例如）中的插件，系统会在该目录中自动将其“拾取”。在中Angular 2/4/5/6，通常通过安装包（可能是插件），然后npm将其添加到中package.json，然后手动将其导入到应用中（如）app.module。这比Drupal拖放文件夹并使系统自动检测软件包的方法要复杂得多。安装插件越复杂，人们使用它们的可能性就越小。如果有一种方法可以更好Angular 2/4/5/6自动检测并安装插件。我非常想找到一种方法，该方法允许非开发人员安装Angular …

133 angular  plugins  angular-cli  angular-universal 

这更多是一个“最佳实践”问题。一共有三个玩家：a Component，a Service和a Model。在Component被调用Service从数据库中获取数据。该Service方法是使用： this.people = http.get('api/people.json').map(res => res.json()); 返回一个Observable。 在Component可以只订阅Observable： peopleService.people .subscribe(people => this.people = people); } 但是，我真正想要的是Service返回一个从数据库检索Array of Model的数据创建的对象Service。我意识到Component可以在subscription方法中创建此数组，但是我认为，如果服务执行此操作并将其提供给，它将更干净Component。 如何Service创建一个Observable包含该数组的new 并返回该数组？

132 angular  observable