Questions tagged «angular»

我@Injectable在引导程序中定义了一项服务。我想在不使用构造函数注入的情况下获取服务实例。我尝试使用，ReflectiveInjector.resolveAndCreate但这似乎创建了一个新实例。 我要这样做的原因是我有一个由许多组件派生的基本组件。现在，我需要访问一个服务，但是我不想将其添加到ctor中，因为我不想在所有派生组件上注入该服务。 TLDR：我需要一个 ServiceLocator.GetInstance<T>() 更新： RC5 +的更新代码：存储进样器实例以在组件中使用

81 angular  angular2-di  angular2-injection 

错误 储存库不干净。请提交或存储任何更改，然后再进行更新 当我从版本7更新到Angular 8时。 Angular升级指南https://update.angular.io/#7.0:8.0 D:\app-test> ng update @angular/cli @angular/core npm cache verify 储存库不干净。请在更新之前提交或存储任何更改。 更新版本 PS D:\app-test> ng update Using package manager: 'npm' Collecting installed dependencies... Found 58 dependencies. We analyzed your package.json, there are some packages to update: Name Version Command to update -------------------------------------------------------------------------------- @angular/cdk 7.2.2 -> 8.0.1 ng …

81 angular  typescript  git  angular-cli  angular8 

我有这样简单的自定义输入组件， import {Component, Provider, forwardRef} from "@angular/core"; import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms"; const noop = () => {}; const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CustomInputComponent), multi: true }; @Component({ selector: 'custom-input', template: ` <input class="form-control" [(ngModel)]="value" name="somename" (blur)="onTouched()"> `, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR] }) export class CustomInputComponent implements …

80 angular 

如何在Angular2中取消订阅？RxJS似乎有一个dispose方法，但是我不知道如何访问它。所以我有访问EventEmitter并订阅它的代码，如下所示： var mySubscription = someEventEmitter.subscribe( (val) => { console.log('Received:', val); }, (err) => { console.log('Received error:', err); }, () => { console.log('Completed'); } ); 如何使用mySubscription取消订阅？

80 javascript  angular  rxjs 

在angular2中，当另一个控件发生更改时，我想触发某些控件的验证器。有什么办法可以让我告诉表单重新验证？更妙的是，我可以要求验证特定字段吗？ 示例：假设复选框X和输入P.输入P有不同的行为基于X时，选中/取消我需要调用P上验证P上的验证将着眼于模型X的模型值的验证确定X的状态并相应地验证P。 这是一些代码： constructor(builder: FormBuilder) { this.formData = { num: '', checkbox: false }; this.formGp = builder.group({ numberFld: [this.formData.num, myValidators.numericRange], checkboxFld: [this.formData.checkbox], }); } this.formGp.controls['checkboxFld'].valueChanges.observer({ next: (value) => { // I want to be able to do something like the following line: this.formGp.controls['numberFld'].validator(this.formGp.controls['numberFld']); } }); 有人有解决办法吗？谢谢！

80 forms  validation  angular 

我正在尝试在Angular2应用程序的图像src标签中的资产文件夹中放置我的图像之一的相对路径。我在组件中将变量设置为“ fullImagePath”，并在模板中使用了该变量。我尝试了许多不同的可能路径，但似乎无法提升自己的形象。Angular2中是否有一些总是与Django中的静态文件夹相关的特殊路径？ 零件 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-hero', templateUrl: './hero.component.html', styleUrls: ['./hero.component.css'] }) export class HeroComponent implements OnInit { fullImagePath: string; constructor() { this.fullImagePath = '../../assets/images/therealdealportfoliohero.jpg' } ngOnInit() { } } 我还将图片与该组件放置在相同的文件夹中，因此，由于模板和同一文件夹中的css在起作用，所以我不确定为什么图像的类似相对路径不起作用。这是与同一文件夹中的图像相同的组件。 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-hero', templateUrl: './hero.component.html', styleUrls: …

80 html  angular  image  typescript  path 

我正在寻找针对Angular 2的解决方案，用于以下情况： 在这种情况下，top-nav包含指向加载子模块的链接，sub-nav包含用于更新子模块内容的链接。 网址应映射为： / home =>将主页加载到主要组件路由器出口中 / submodule =>在主组件路由器出口中加载子模块，默认情况下应显示子模块的主页和子导航栏 / submodule / feature =>将功能加载到子模块的路由器出口内 应用程序模块（和应用程序组件）包含顶部导航栏，可导航到不同的子模块，并且应用程序组件模板看起来像这样 <top-navbar></top-navbar> <router-outlet></router-outlet> 但这就是复杂性。我需要我的子模块具有类似的布局，并带有第二级导航栏和自己的路由器插座，以加载自己的组件。 <sub-navbar></sub-navbar> <router-outlet name='sub'></router-outlet> 我尝试了所有选项并进行了无处不在的搜索，但找不到找到具有路由器插座的子模块中具有默认模板（如应用程序组件）的解决方案，并且在不丢失子导航的情况下在内部路由器插座中加载了子模块的内容。 我将不胜感激任何意见或建议

80 angular  routing 

我正在尝试将单元测试添加到Angular 2应用程序中。在我的一个组件中，有一个带有(click)处理程序的按钮。当用户单击按钮时，将调用一个在.ts类文件中定义的函数。该函数在console.log窗口中打印一条消息，表明已按下该按钮。我当前的测试代码对console.log消息的打印进行了测试： describe('Component: ComponentToBeTested', () => { var component: ComponentToBeTested; beforeEach(() => { component = new ComponentToBeTested(); spyOn(console, 'log'); }); it('should call onEditButtonClick() and print console.log', () => { component.onEditButtonClick(); expect(console.log).toHaveBeenCalledWith('Edit button has been clicked!); }); }); 但是，这仅测试控制器类，而不测试HTML。我不仅要测试onEditButtonClick调用时是否发生日志记录，还需要进行测试。我还想测试onEditButtonClick用户单击组件的HTML文件中定义的编辑按钮时调用的方法。我怎样才能做到这一点？

80 angular  typescript  jasmine 

我知道在堆栈溢出中已经发布了很多相同的问题，并尝试了不同的解决方案来避免运行时错误，但是没有一个对我有用。 组件和HTML代码 export class TestComponent implements OnInit, AfterContentChecked { @Input() DataContext: any; @Input() Position: any; sampleViewModel: ISampleViewModel = { DataContext: : null, Position: null }; constructor(private validationService: IValidationService, private modalService: NgbModal, private cdRef: ChangeDetectorRef) { } ngOnInit() { } ngAfterContentChecked() { debugger; this.sampleViewModel.DataContext = this.DataContext; this.sampleViewModel.Position = this.Position; } <div …

80 angular  runtime-error 

因此，我试图在Firebase和Heroku上构建和部署Angular 4应用程序以进行生产，但是遇到了如下错误： / Users / ... / ...（57,49）中的错误：类型'{不存在属性'firebase'{production：boolean; }'。 它在我运行时发生ng build --prod，并且我的部署服务器运行正常。这是我的app.module.ts文件，以供参考： import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AngularFireModule } from 'angularfire2'; import { AngularFireDatabaseModule } from 'angularfire2/database'; import { Ng2ScrollimateModule } from 'ng2-scrollimate'; import { …

80 angular  firebase  heroku  environment-variables  firebase-hosting 

在将Angular Cli从SystemJs切换到Webpack之后，我不确定如何包括JS文件（供应商）。 例如 选项A 我有一些通过npm安装的js文件。这样无法将脚本标签添加到head标签。似乎也不是最好的方法。 <head> <script src="node_modules/some_package/somejs.js"> </head> //With systemJs I could do this <head> <script src="vendor/some_package/somejs.js"> </head> 选项B 将这些js文件作为webpack捆绑包的一部分包含在内。这似乎是应该完成的方式。但是我不确定如何执行此操作，因为所有webpack代码似乎都隐藏在angular-cli-webpack节点包的后面。我在想，也许还有另一个我们可以访问的webpack配置。但是我不确定，因为在创建新的angular-cli-webpack项目时没有看到一个。 更多信息： 我要包含的js文件需要包含在Angular项目之前。例如，jQuery和第三方js库，它们实际上并未为模块加载或打字稿设置。 参考 https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md https://github.com/angular/angular-cli/tree/webpack

79 javascript  angular  angular-cli 

内置管道是可行的，但是我要使用的所有自定义管道都是相同的错误： 找不到管道'actStatusPipe' [错误->] {{data.actStatus | actStatusPipe}} 我尝试了两种方法，在app.module的声明中进行声明： app.module.ts： import {ActStatusPipe} from '../pipe/actPipe' @NgModule({ declarations: [ AppComponent, HomePage, ActivitiesList, ActStatusPipe ], ... }) 或使用其他模块声明并导出我的所有管道：// pipe import {ActStatusPipe} from "./actPipe" @NgModule({ declarations:[ActStatusPipe], imports:[CommonModule], exports:[ActStatusPipe] }) export class MainPipe{} 并将其导入到app.module中。 //pipe import {MainPipe} from '../pipe/pipe.module' @NgModule({ declarations:[...], imports:[...,MainPipe], }) 但是它们都不在我的应用程序中工作。 这是我的管道代码： import {Pipe,PipeTransform} …

79 angular  angular2-pipe 

我正在使用Angular Meteor 2创建一个简单的UI。 1）我有一个顶部的导航栏组件，其中有一个“注销”按钮。 2）在单击“注销”按钮时，它将重定向到“登录”。 3）然后我在控制台中看到此错误：EXCEPTION: Attempt to use a destroyed view: detectChanges 例外： EXCEPTION: Attempt to use a destroyed view: detectChanges browser_adapter.js:77 EXCEPTION: Attempt to use a destroyed view: detectChangesBrowserDomAdapter.logError @ browser_adapter.js:77BrowserDomAdapter.logGroup @ browser_adapter.js:87ExceptionHandler.call @ exception_handler.js:57(anonymous function) @ application_ref.js:265schedulerFn @ async.js:123SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext …

79 angular  angular2-meteor 

我@input用来从父组件接收属性，以便在子组件的元素之一中激活CSS类。 我可以从父级接收属性，也可以激活该类。但这仅工作一次。我从父级收到的属性是一个布尔数据类型，当我将其状态设置为false子级组件时，它在父级中不会更改。 Plunkr：https：//plnkr.co/edit/58xuZ1uzvToPhPtOING2 ？ p = preview 应用程序 import {Component, NgModule} from '@angular/core' import {BrowserModule} from '@angular/platform-browser' import { HeaderComponent } from './header'; import { SearchComponent } from './header/search'; @Component({ selector: 'my-app', template: ` <app-header></app-header> `, }) export class App { name:string; constructor() { } } @NgModule({ imports: [ BrowserModule …

79 angular  typescript  angular2-inputs 

在我的angular 2应用程序中，我有一个使用库中Observable类的服务rxjs。 import { Observable } from 'rxjs'; 目前，我正在使用Observable以便可以使用该toPromise()功能。 我在另一个地方的另一个StackOverflow问题中读到，以这种方式导入并从中rxjs/Rx导入也会从rxjs库中导入大量不必要的内容，这将增加页面加载时间和/或代码库。 我的问题是，什么是最好的导入方式，Observable以便我可以使用该toPromise()功能而不必导入其他所有内容？

79 angular  typescript  rxjs  angular2-observables